jQuery 显示 20 下一个元素 onClick 事件

Question

我正在构建一个从我的数据库加载 100 行的表单，并在 80 个最后元素上添加一个类名"noShow"（显示：无）。

我制作了一个按钮，当我单击它时，我想在其中显示 20 多个元素。

所以加载，我得到了 20 个显示：块和 80 个显示：无;

我实际上正在尝试循环检测并删除该类，但它似乎不起作用。

$('#afficher_plus_sanair').bind('click', function()
{
    for ( var i = 0; i < 20; i++ ) 
    {
        $(this).parent().parent().find('table tbody tr.noShow').first().removeClass('noShow').show();
    }

});

如您所见，我使用了 .first（），并且它对"一个接一个"元素正常工作。

$('#afficher_plus_sanair').bind('click', function()
{
        $(this).parent().parent().find('table tbody tr.noShow').first().removeClass('noShow').show();

});

我怎样才能获得 20 个下一个，当我再次单击时，脚本继续原样？

---

.HTML

<table class="table table-striped table-bordered table-hover">
..
<tbody>
<tr >
<td>20</td>
</tr>
<tr style='display:none;' class='noShow'>                                                  
<td>21</td>   
</tr>
</tobdy>
</table>

Answer 1

你可以这样做：

$('#afficher_plus_sanair').bind('click', function () {
    $(this).parent().parent().find('table tbody tr.noShow').nextAll(':lt(20)').removeClass('noShow').show();
});

.nextAll()将为您提供表行的所有以下兄弟姐妹noShow类。

:lt(20)将从索引小于 20 的元素中过滤掉 20 个元素。

Answer 2

工作演示

试试这个

您不必使用类，您可以获取隐藏元素，从而避免添加和删除类，您也可以获得确切的元素。下面是代码

 $("#button").click(function () {
        $(".table-striped tr:hidden").slice($(".table-striped tr:hidden").first().index(),20).show();
    });

希望这有帮助，谢谢

Answer 3

您可以在nextAll()上尝试slice()：

例如，如果您需要当前元素中的下 20 个元素，您可以尝试：

var nextTwenty = $(this).nextAll().slice(0,20);

试试这个：

$(this).parent().parent().find('table tbody tr.noShow').first().nextAll().slice(0,20);