用jQuery切换可见列表项目

Question

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

我开始了与此：

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

但是，最终躲在所有列表中的所有项目，除了在第一列表中的第5名，因为它们都被计数在一起。

我该怎么做，但它会影响每个列表单独（请注意，我不能添加唯一的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(); 
});