Question

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

我已经制作了一个按钮，当我点击它时我想要显示20个元素。

所以onload，我有20个显示：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个nexts，当我再次点击时，脚本会继续显示它的位置？

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

工作DEMO

试试这个

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

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

希望这有帮助，谢谢

Answer 3

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

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

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

试试这个：

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

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

HTML

3 个答案:

工作DEMO