Question

我有下表

<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>

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

Answer 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

Answer 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/

Answer 3

我认为这正是您所寻找的：jQuery .nextUntil()

Answer 4

使用nextUntil

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

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

});

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

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

如何立即跟随兄弟姐妹到下一个无与伦比的选择器

4 个答案: