如何立即跟随兄弟姐妹到下一个不匹配的选择器

Posted 2023-05-09

【中文标题】如何立即跟随兄弟姐妹到下一个不匹配的选择器

【英文标题】：How to get immediately following siblings up to next unmatched selector

【发布时间】：2012-09-29 09:02:46

【问题描述】：

我有下表

<table id="table">
<tr><td>Item</td></tr>
<tr class="hide"><td>Hidden Item</td></tr>
<tr class="hide"><td>Hidden Item</td></tr>
<tr class="hide"><td>Hidden Item</td></tr>
<tr><td>Item</td></tr>
<tr class="hide"><td>Hidden Item</td></tr>
<tr class="hide"><td>Hidden Item</td></tr>
<tr><td>Item</td></tr>
<tr class="hide"><td>Hidden Item</td></tr>
<tr class="hide"><td>Hidden Item</td></tr>
<tr class="hide"><td>Hidden Item</td></tr>
<tr class="hide"><td>Hidden Item</td></tr>
<tr><td>Item</td></tr>
</table>

单击可见行时，我想将所有紧随其后的隐藏行显示到下一个可见行。隐藏行数不固定。如何立即选择直到特定元素的后续行？

【问题讨论】：

使用类将这些隐藏项分组到一个块中，并在单击父可见元素时执行 jQuery 的fadeIn()。

【参考方案1】：

//Add a class to your visible rows if possible to replace the next selector
$('tr:visible').click(function() 
    $('.hide').hide();
    $(this).nextUntil(':visible').fadeIn();
);​

Fiddle

.nextUntil() Reference

---

给可见行添加一个show类，你可以给它添加一个简单的切换效果：

$('.show').click(function() 
    $(this).nextUntil('.show').not('.show').fadeToggle();
);

Fiddle

---

一个稍微复杂的版本，它切换点击的行部分并隐藏之前打开的行：

$('.show').click(function() 
    $('.hide').not(
        $(this).nextUntil('.show').not('.show').fadeToggle()
    ).hide();
);

Fiddle

【讨论】：

$(this).next()需要什么？

$(this).next() 是在单击的行之后开始选择行 - 它会选择第一个隐藏的行。如果您只是显示这些而不是切换它们，那并没有太大区别。

但是是的，通过调用andSelf 会使.next() 变得多余，将其编辑掉。

谢谢。我在上面提供了一个简化的表格。实际表有一个可见行的类。我会用那个。

【参考方案2】：

你可以使用.nextUntil() - 用你的元素替换 $('tr:first') -

$('tr:first').nextUntil('tr:not(.hide)').show()
// from first tr until next one that doesn't have class=hide

虽然我可能会使用 toggle() 来隐藏/显示以下元素 - 但我不确定你的目标是什么，所以你可以在之后做你想做的事

$('.hide').hide();
$('tr:not(.hide)').click(function()   
    $(this).nextUntil('tr:not(.hide)').toggle();    
);

http://jsfiddle.net/nqTJc/

​

【参考方案3】：

我想这就是你要找的东西：jQuery .nextUntil()

【参考方案4】：

使用下一个直到

$('tr').click(function()

 $(this).nextUntil(':not("tr.hide")').show();

);​​

找到 jsfiddle http://jsfiddle.net/K5QcA/

供参考 http://api.jquery.com/nextUntil/