如何使用 jQuery 显示（）和隐藏（）列表项块

Question

我有一个动态生成列表项的站点，如下所示：

<li class="comment even thread-odd thread-alt depth-1" id="li-comment-10">...</li>
<li class="comment odd alt thread-even depth-1" id="li-comment-17">...</li>
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-20">...</li>
<li class="comment byuser comment-author-not-used-2 odd alt depth-2" id="li-comment-21">
...</li>

目前有 40 多个项目符合上述模式。

我想使用 jQuery 到 show/hide 5 块中的列表项。我知道如何编写 jQuery 的代码来切换，但我不知道的是如何计算和标记 5 块以显示和隐藏。

问题是这些 <li> 是在 CMS 中自动生成并动态呈现在页面上的。所以我想在页面呈现后使用 JavaScript/jQuery 进入并识别并以某种方式标记 5 个列表项的块。

可以吗？

希望这是有道理的。

Answer 1

您可以使用 jQuery :eq() 选择器通过一些数学运算对它们进行迭代。例如，您可以使用 $("li:eq(1)").

获得第二个 <li>

Answer 2

尝试使用带有参数 5

的 :lt() 选择器

$(document).ready(function() {
  $("ul li:lt(5)").show()
})

ul li {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js">
</script>
<ul>
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>

如何使用 jQuery 显示（）和隐藏（）列表项块

How to show() and hide() blocks of list items using jQuery

javascript

jquery

dynamic

html-lists

content-management-system