Question

我试图在我的页面上显示5个元素，然后有一个加载/显示5个以上的功能，此过程可以继续，直到不再有隐藏元素为止。

我创造了一个小提琴，告诉你到目前为止我做了什么：https://jsfiddle.net/89v781rL/2/

目前，当点击按钮时，所有隐藏的元素同时显示，这不是我想要的。我需要在当时显示的元素中再添加5个元素。

我尝试过类似的东西，但它不起作用：

$('#grid li').not(':visible').each( function() {    
  $("#grid").children(":gt(4)").hide();
});

这是我完整的工作代码：

$("#grid").children(":gt(4)").hide();

$('#sales').click(function() {
    $('#grid li').not(':visible').each( function() {
      $(this).slideDown();
    });
});

Answer 1

使用slice()获取下5个隐藏元素并在其上调用slideDown()，即可实现所需。另请注意，您可以使用CSS :nth-child隐藏元素而不是JS，以便在加载时避免使用FOUC。试试这个：

＆＃13;

$('#sales').click(function() {
  $('#grid li:hidden').slice(0, 5).slideDown();
});

＆＃13;

#grid li:nth-child(n+6) {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="grid effect-2 cols" id="grid">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">8</a></li>
  <li><a href="#">9</a></li>
  <li><a href="#">10</a></li>
  <li><a href="#">11</a></li>
  <li><a href="#">12</a></li>
  <li><a href="#">13</a></li>
  <li><a href="#">14</a></li>
  <li><a href="#">15</a></li>
  <li><a href="#">16</a></li>
  <li><a href="#">17</a></li>
</ul>

<button id="sales">
  Show more
</button>

＆＃13;

点击按钮显示更多元素？

1 个答案: