2012-05-14 5 views
18

나는 순서가없는 목록이 있습니다.jQuery에서 특정 클래스가있는 요소 사이의 요소는 어떻게 선택합니까?

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

jQuery를 사용하여 클래스 foo와 bar가있는 목록 항목 사이에서 목록 항목을 선택하려면 어떻게해야합니까? 목록 항목의 내용을 알지 못합니다. 얼마나 많은 목록 항목을 선택해야할지 모르기 때문에 카운트에 의존 할 수 없습니다.

+1

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

+1

재미있는 질문이 있다면 내 대답의 소스 코드를 확인하십시오 ... – gdoron

답변

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

또는 다른 방법 :

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

Demo


당신이 그것을 구현 어떻게 알고 둘다 경우, 012,382,:

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. – VisioN

+1

@VisioN. 나는 DEMO를 생각했는데, 색이 바뀌는 것이 좋았다 ... ** 2012 ** – gdoron

+0

컬러 애니메이션은 어디에 있습니까? 나는 더 잘 보았습니다 : P – VisioN

2

시도,

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

DEMO

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

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

또는 $('li.foo').nextUntil('li.bar');

또는 $('li.bar').prevUntil('li.foo');

관련 문제