如何使用 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 来显示/隐藏 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>