将隐藏状态更改为表格的可见状态＆gt; TR点击

Question

我有一个几乎有100行的表格，我通过在tr中添加一个类来显示20作为可见并通过类隐藏<隐藏其余行/强>

<tbody>
    <tr class="visible"></tr>
    <tr class="visible"></tr>
    <tr class="hidden"></tr>
    <tr class="hidden"></tr>
    <tr class="hidden"></tr>
</tbody>

我添加了添加更多按钮，每次单击按钮时显示5行，但我的jQuery逻辑完全错误，看一下

$(".more-show").click(function (e)  {
    e.preventDefault();
    for (var i = 0; i<5; i++) {
        $('#ranking-table tr').each(function(i) {
            $(this).removeClass("hidden").addClass("visible");
        });
    }
});

---

问题

不是每次点击都显示5行，而是必须是前5个隐藏行，它通过将类更改为可见 <来显示所有行/ p>

Answer 1

您可以使用选择器$('#ranking-table tr.hidden:lt(5)')选择带有tr类的前5个.hidden元素。它使用:lt(5)。

Example Here

$(".more-show").click(function (e)  {
    e.preventDefault();
    $('#ranking-table tr.hidden:lt(5)').each(function(i) {
        $(this).removeClass("hidden").addClass("visible");
    });
});