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）

Answer 1

jQuery 1.4现在具有.nextUntil（选择器）功能：

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

Answer 2

您可以遍历nextAll div个兄弟元素，直到找到以下.parent，请检查example：

$('.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>

...

Answer 3

*请参阅@foson回答jquery 1.4+ *

查看Ben Almans until utils。

它为您提供了3种有用的方法：nextUntil，prevUntil，parentsUntil。

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

jquery选择兄弟姐妹'直到'

4 个答案: