Controllare se elemento è prima o dopo un altro elemento in jQuery

Question

Supponiamo ho questo markup

<h3 id="first">First</h3> 
<p>Hi</p> 
<p>Hello</p> 
<h3 id="second">Second</h3> 
<p>Bye</p> 
<p>Goodbye</p> 

Come posso programmazione verificare se un elemento, come ad esempio uno dei p s, è dopo la prima h3 e prima del secondo h3, con jQuery?

sto cercando di fare qualcosa di simile:

$(p).each(function(){ 
    if($(this).isAfter("#first") && $(this).isBefore("#second")) { 
    // do stuff 
    } 
}); 

Answer 1

per vedere se un elemento è dietro l'altro, è possibile utilizzare prev() o prevAll() per ottenere l'elemento precedente (s), e vedere se corrisponde.

E per vedere se un elemento è prima di un altro, è possibile utilizzare next() o nextAll() per ottenere gli elementi successivi, e vedere se corrisponde.

$.fn.isAfter = function(sel){ 
    return this.prevAll(sel).length !== 0; 
} 
$.fn.isBefore= function(sel){ 
    return this.nextAll(sel).length !== 0; 
} 

DEMO: http://jsfiddle.net/bk4k7/

Answer 2

Ecco un fiddle

$('p').each(function() { 
    previousH3 = $(this).prevAll('h3'); 
    nextH3 = $(this).nextAll('h3'); 

    if (previousH3.length > 0 && nextH3.length > 0) { 
     $(this).css('color', 'red') 
    } 

}); 

Answer 3

È possibile utilizzare la funzione index():

$('p').each(function(){ 
    var index = $(this).index(); 
    if(index > $("#first").index() && index < $("#second").index()) { 
    // do stuff 
    } 
}); 

Answer 4

La risposta:

$.fn.isAfter = function(sel){ 
    return this.prevAll(sel).length !== 0; 
} 
$.fn.isBefore= function(sel){ 
    return this.nextAll(sel).length !== 0; 
} 

sceglieva tutti gli elementi precedenti o successivi elementi indipendentemente dal selettore (SEL) quindi apportate le seguenti modifiche che selezionano elementi in base alla classe: soluzione

$.fn.isAfter = function(sel){ 
    sel = "." + sel.attr("class").replace(/ /g, "."); 

    return this.prevAll(sel).length !== 0; 
} 
$.fn.isBefore= function(sel){ 
    sel = "." + sel.attr("class").replace(/ /g, "."); 

    return this.nextAll(sel).length !== 0; 
} 

Answer 5

Rocket funziona bene se sel è una vera selettore , se passi un oggetto jquery, non funzionerà.

Se si desidera un plugin che funziona con entrambi i selettori e gli oggetti jQuery, basta usare la mia versione leggermente modificata, invece:

(function($) { 
    $.fn.isAfter = function(sel){ 
     return this.prevAll().filter(sel).length !== 0; 
    }; 

    $.fn.isBefore= function(sel){ 
     return this.nextAll().filter(sel).length !== 0; 
    }; 
})(jQuery); 

Complimenti a razzo per la soluzione originale.

Answer 6

Tenendo risposta mente di Rocket Io preferisco usare .index() approccio come segue:

$.fn.isAfter = function(sel){ 
    return $(this).index() > $(sel).index(); 
}; 
$.fn.isBefore= function(sel){ 
    return $(this).index() < $(sel).index(); 
}; 

sembra più chiaro per la lettura/comprensione e funziona perfettamente in selezione righe.