1

我有下表

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

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

4

4 回答 4

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

小提琴

.nextUntil()参考

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

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

小提琴

一个稍微详细的版本，它切换点击的行部分并隐藏以前打开的行：

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

小提琴

于 2012-10-09T05:10:44.193 回答
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/

​</p>

于 2012-10-09T05:11:01.620 回答
1

我认为这就是您要寻找的：jQuery .nextUntil()

于 2012-10-09T05:10:52.257 回答
1

使用下一个直到

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

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

});​​

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

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

于 2012-10-09T05:11:57.760 回答