jquery - jQueryでは、特定のクラスを持つ要素間で要素を選択するにはどうすればよいですか?

Question

順序付けられていないリストがあります。

<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を持つリスト項目の間のリスト項目を選択するにはどうすればよいですか? どのリスト項目の内容もわかりません。また、選択するリスト項目の数がわからないため、カウントに依存することはできません。

Answer 1

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

http://jsfiddle.net/zZRDB/1/

Answer 2

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

または他の方法：

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

デモ

---

それがどのように実装されているかを知りたい場合は、ソースコードをチェックしてください：

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;
},​

Answer 3

試す、

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

デモ

Answer 4

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');