Comprobar si el elemento es antes o después de otro elemento en jQuery

Question

Supongamos que tengo esta marcado

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

¿Cómo puedo programación comprobar si un elemento, como una de las p s, es después de la primera h3 y antes del segundo h3, con jQuery?

estoy tratando de hacer algo como esto:

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

Answer 1

Para ver si un elemento se encuentra detrás de otro, puede utilizar prev() o prevAll() para obtener el elemento (s) anterior, y ver si coincide.

Y para ver si un elemento está antes que otro, puede usar next() o nextAll() para obtener los siguientes elementos y ver si coinciden.

$.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

Aquí es una 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

Usted puede utilizar la función index():

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

Answer 4

La respuesta:

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

seleccionaba todos los elementos anteriores o elementos próximos independientemente del selector (SEL) así que hice las siguientes modificaciones que seleccionan los elementos sobre la base de la clase: solución

$.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

del cohete funciona bien si sel es un selector de bienes Sin embargo, si pasas un objeto jquery, no funcionará.

Si quieres un plugin que funciona con ambos selectores y objetos jQuery, sólo tiene que utilizar mi versión ligeramente modificada en su lugar:

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

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

Felicitaciones a Rocket de la solución original.

Answer 6

Teniendo en cuenta la respuesta de Rocket Yo prefiero usar .index() enfoque como el siguiente:

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

parece más clara para la lectura/comprensión y funciona a la perfección en la selección de filas.