jQuery选择兄弟元素直到某个特定元素（until）

Question

我有一个类似于DOM的结构：

<input class="parent"></div>
<input class="child"></div>
<input class="child"></div>
<input class="parent"></div>
<input class="child"></div>
...

我知道这样做是不正确的，正确的方法是改革HTML，但假设这不可能实现。

如何使用jQuery选择一个父元素下的所有子元素（即选择所有 .children 直到 .parent）？

- jon skulski

Answer 1

jQuery 1.4现在具有.nextUntil(selector)函数:

    $('div.parent').toggle(
        function() {
            $(this).nextUntil('div.parent').hide();
         },
        function() {
            $(this).nextUntil('div.parent').show();
        }
    );

- foson

Answer 2

您可以通过使用nextAll函数遍历

元素的兄弟元素，直到找到下一个.parent元素。请参考示例：

$('.parent').click(function() {
  $(this).nextAll('div').each(function() {
    if ($(this).is('.parent')) {
      return false; // next parent reached, stop
    }
    $(this).toggleClass('highlight');
  });
});

使用的标记：

<div class="parent">parent 1</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="parent">parent 2</div>
<div class="child">child</div>
<div class="parent">parent 3</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>

...

- Christian C. Salvadó

---

我会再试一次。我之前是这样做的，但由于没有包含一些额外的DOM元素（包装器），导致速度变慢。我没有想到只需返回false（我进行了全面检查）。我会优化并再次尝试。谢谢！ - jon skulski

这真是非常有帮助。谢谢！ - BradTheBluefish

Answer 3

* 请参考 @foson 的jquery 1.4+答案 *

看看Ben Almans的until utils。

它提供了3个有用的方法：nextUntil、prevUntil、parentsUntil。

- redsquare

---

我最终选择了这个工具，非常容易使用，可以实现上述功能，但我不必维护它 ;) - jon skulski

值得一提的是，要检查@foson的答案，他讲述了nextUntil的用法。 - LCJ

Answer 4

我认为不需要上述的自定义函数，JQuery通过nextUntil(selector, filter)函数支持这个功能，但是你应该添加过滤器，只将脚本应用于被过滤的元素，而不是所有的下一个元素：

//hide all .child elements
$('div.child').hide();
$('div.parent').click(function() {
  //Toggle (show or hide) only .child elements until finding .parent element.
  $(this).nextUntil('div.parent', 'div.child').slideToggle('slow');
});

- Omar Alahmed