不同阶段点击显示更多内容

Question

我有以下设置：

<div class="uncode-post-table">
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  ...
</div>
<a id="more-actions" onclick="event.preventDefault();" href="javascript:void(0);">Load more actions</a>

div.tmb 的列表将随时间延长，目前包含 50 项。

在我的 CSS 中，我有以下行：

.uncode-post-table .tmb:nth-child(n+11) {
  display: none;
}

所以它只显示前十个 .tmb div。单击链接时我想要做的是在列表中显示接下来的 10 个 .tmb div（因此 .tmb div 1-20 将显示）。再次单击该链接将显示另外 10 个 .tmb div (1-30)。依此类推，直到所有 div 都可见。

到目前为止我在 jQuery 中有这个：

$("#more-actions").click(function(){
  $(".uncode-post-table .tmb").css("display", "block");
});

单击链接时，将立即显示所有 .tmb div。

我试图在这里找到答案：使用 jQuery 显示更多/显示更少，它还显示整个列表而不是接下来的 10 个 div。 另外，这个并没有真正回答我的问题：使用 jQuery 实现“显示更多”按钮的最佳方法是什么？

Answer 1

要显示接下来的 10 个等等，每次单击后您可以这样做：

$("#more-actions").click(function() {
  $(".uncode-post-table .tmb:visible:last").nextAll("*:lt(10)").css("display", "block");
});

演示

$("#more-actions").click(function() {
  $(".uncode-post-table .tmb:visible:last").nextAll("*:lt(10)").css("display", "block");
});

.uncode-post-table .tmb:nth-child(n+11) {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="uncode-post-table">
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
  <div class="tmb">some content</div>
</div>
<a id="more-actions" onclick="event.preventDefault();" href="javascript:void(0);">Load more actions</a>