2012-05-14 12 views
18

Mam nieuporządkowaną listę.W jQuery, w jaki sposób wybrać elementy między elementami z pewnymi klasami?

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

Jak wybrać elementy listy pomiędzy pozycjami na liście z klasami foo i bar przy użyciu jQuery? Nie znam zawartości żadnych elementów listy. Nie wiem też, ile pozycji na liście jest do wyboru, więc nie mogę polegać na liczbie.

+1

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

+1

Sprawdź kod źródłowy w mojej odpowiedzi, jeśli jest interesujący ... – gdoron

Odpowiedz

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

Albo odwrotnie:

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

Demo


Jeśli jesteś zainteresowani wiedzieć, jak to jest realizowane, 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 za dwa sposoby. – VisioN

+1

@VisioN. Myślałem o DEMO, ładnie, zmieniając kolor ... ** 2012 ** – gdoron

+0

Gdzie jest animacja kolorów? Widziałem lepiej: P – VisioN

2

spróbować

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

DEMO

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

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

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

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

Powiązane problemy