使用jQuery切换可见列表项

Question

我的网页上有多个无序列表。在每个列表中，我想默认只显示前五个列表项，然后有一个链接可以打开和关闭其余项目的显示。

我从这开始：

$("ul li").slice(5).hide();

但最终隐藏了所有列表中的所有项目，除了第一个列表中的前五个项目，因为它们都被计算在一起。

我该如何做，但让它单独影响每个列表（请注意，我不能为每个列表添加唯一ID）？

Answer 1

您需要使用each函数为您拥有的每个<ul>执行此操作。尝试这样的事情：

$("ul").each(function(){
  $(this).children().slice(5).hide();
});

然后使用这样的代码来展示它们：

$("#btn").click(function(){
   $("ul").each(function(){
      $(this).children().show();
   });
});  

这是一个jsfiddle： http://jsfiddle.net/F8ByE/

希望这会有所帮助：）

Answer 2

您可以迭代每个ul元素，然后隐藏li元素

$("ul").each(function() {
    $(this).find('li:gt(5)').hide();
});