javascript - 使用 jQuery 隐藏和显示数据列表的更多行

Question

我有一个 asp 数据列表，其设置如下:

<asp:DataList ID="dlListItems" ClientIDMode="Static" Width="100%" runat="server" RepeatColumns="2" ItemStyle-BorderColor="#E8E6E7" ItemStyle-BorderStyle="Solid" ItemStyle-BorderWidth="1px"
        RepeatDirection="Horizontal" RepeatLayout="Table">

在数据列表中，每个节点都包含一个类为“divList”的div

我需要能够实现一些东西，这样就不会在加载时显示所有节点，还需要一个按钮来加载更多节点。无需执行服务器端操作，只需显示隐藏行即可。

我设法通过隐藏然后一次显示 10 个 div 使其工作。虽然这很有效，但数据列表中的表格行仍会显示，因此您会在数据列表底部看到很大的空白行。

 $(function () {
    $(".divList").slice(0, 10).show(); 
    $("#load").click(function (e) { 
        e.preventDefault();
        $(".divList:hidden").slice(0, 10).fadeIn(1500);          
    });
});

希望有人可以对我如何在表格行而不是 div 上实现它提出一些建议，以防止数据列表中出现空白。请记住(据我所知)我无法将任何 id 的类分配给数据列表生成的行。

Answer 1

你应该试试这个

$(function(){
    var trs =  $("#dlListItems tr");
    trs.hide();
    trs.slice(0, 10).show(); 
    $("#load").click(function (e) { 
        e.preventDefault();
        $("#dlListItems tr:hidden").slice(0, 10).fadeIn(1500);          
    });
});

首先隐藏 dlListItems 中的所有表格行，然后获取要显示的 trs，因为您不想显示那些隐藏了 div 的行。