javascript - 如何使用 jQuery show() 和 hide() 列表项 block

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 block 中的列表项。我知道如何编写用于切换的 jQuery 代码，但我不知道如何计算和标记 5 block 中的列表项以显示和隐藏。

困境在于这些<li>是在 CMS 中自动生成并动态呈现在页面上。所以我想在页面渲染后使用 JavaScript/jQuery 来识别并以某种方式标记 5 个列表项的 block 。

这可行吗？

希望这是有道理的。

Answer 1

尝试使用带有参数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>