1

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

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

所以在加载时，我得到了 20 个 display:block 和 80 个 display:none;

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

$('#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>
4

3 回答 3

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 个元素。

于 2013-11-04T06:41:00.863 回答
1

工作演示

尝试这个

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

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

希望这会有所帮助，谢谢

于 2013-11-04T07:23:41.320 回答
0

你可以试穿slice()：nextAll()

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

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

尝试这个：

$(this).parent().parent().find('table tbody tr.noShow').first().nextAll().slice(0,20);
于 2013-11-04T06:40:32.720 回答