2012-05-14 13 views
18

Tengo una lista desordenada.En jQuery, ¿cómo selecciono elementos entre elementos con ciertas clases?

<ul> 
    <li class="foo">Baz</li> 
    <li>Select Me!</li> 
    <li>Select Me!</li> 
    <li>Select Me!</li> 
    <li class="bar">Baz</li> 
    <li>Don't Select Me</li> 
    <li>Red Herring List Item</li> 
</ul> 

¿Cómo selecciono los elementos de la lista entre los elementos de la lista con las clases foo y barra usando jQuery? No sé el contenido de ningún elemento de la lista. Tampoco sé cuántos elementos de la lista hay para ser seleccionados, así que no puedo depender de un conteo.

+1

[ '$ ('li.bar') prevUntil (. 'li.foo') ' ] (http://api.jquery.com/prevUntil/) – Orbling

+1

Verifique el código fuente en mi respuesta si es interesante ... – gdoron

Respuesta

12
var $elements = $('.bar').prevUntil('.foo'); 

O a la inversa:

var $elements = $('.foo').nextUntil('.bar'); 

Demo


Si estás en trayectos saber cómo se implementa, check out the source code:

nextUntil: function(elem, i, until) { 
    return jQuery.dir(elem, "nextSibling", until); 
}, 
prevUntil: function(elem, i, until) { 
    return jQuery.dir(elem, "previousSibling", until); 
},​ 

dir: function(elem, dir, until) { 
    var matched = [], 
     cur = elem[dir]; 

    while (cur && cur.nodeType !== 9 && (until === undefined || cur.nodeType !== 1 || !jQuery(cur).is(until))) { 
     if (cur.nodeType === 1) { 
      matched.push(cur); 
     } 
     cur = cur[dir]; 
    } 
    return matched; 
},​ 
+0

+1 por dos formas. – VisioN

+1

@VisioN. Pensé en la DEMO, es agradable, el cambio de color ... ** 2012 ** – gdoron

+0

¿Dónde está la animación en color? He visto algo mejor: P – VisioN

2

intento,

$('li.bar').prevUntil('.foo') 

DEMO

2
var index1 = $('li.foo').index(), 
    index2 = $('li.bar').index()-1; 

    $('li:gt('+ index1+'):lt('+ index2+')', 'ul'); 

o $('li.foo').nextUntil('li.bar');

o $('li.bar').prevUntil('li.foo');

Cuestiones relacionadas