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