隐藏列表的一组对象数

我有一个页面上的相同结构的多个对象列表：例子：隐藏列表的一组对象数

<div class="mainWrapper"> 
<div class="listWrapper"> 
<ul> 
<li>Object One</li> 
<li>Object Two</li> 
<li>Object Three</li> 
<li>Object four</li> 
<li>Object five</li> 
</ul> 
</div> 
<div class="listWrapper"> 
<ul> 
<li>Object One</li> 
<li>Object Two</li> 
<li>Object Three</li> 
<li>Object four</li> 
<li>Object five</li> 
</ul> 
</div> 
</div>

使用jQuery，我怎么可以设置它，以便每个列表，只有第一每个列表中显示3个对象，其余都隐藏了？

来源

2012-01-26 Timothy Bassett

尝试:gt()（大于）选择：

$('.listWrapper ul').find('li:gt(2)').hide();

jsFiddle

这是必要的，使用附加find()两遍查询目标li秒。否则，如果有多个ul s，则所有li将被视为单个集合，并且只显示3个总列表项目。 这样我们hide()所选项目的次数与列表中的次数相同。

注意：您希望您的初始查询到达列表本身。

请参阅:gt()选择器documentation。

来源

2012-01-26 01:11:44 paislee

如果有多个“ul”容器，这不起作用。 – ShankarSangoli

啊，你必须和@ ShankarSangoli的答案一致，然后通过两遍查询这些项目来解决这个问题。（更新） – paislee

您可以使用:gt()伪选择器，它在匹配集内索引大于索引的索引处选择所有元素。

$('.listWrapper').find('li:gt(2)').hide();

Demo

来源

2012-01-26 01:13:10 ShankarSangoli

为什么使用'.find（）'而不仅仅是一个选择器'.listWrapper ul li：gt（2）' – ThiefMaster

因为它会选择所有的li作为一个集合，然后应用'：gt（2）在这里给出错误的结果，其中'find'将在每个'listWrapper'容器上运行，然后在匹配的li上应用'：gt（2）'。 – ShankarSangoli

我们不需要'ul'也只需'li：gt（2）'就够了，修改我的答案。 – ShankarSangoli

http://jsfiddle.net/GEbxG/

$('div.listWrapper li').each(function(i, elem) { 
    if($(elem).index() < 3) return; 
    $(elem).hide(); 
});

来源

2012-01-26 01:13:42

虽然这样做很丑陋。 – ThiefMaster

这就是为什么我upvoted @ShankarSangoli的答案。耶同时答案。 –

$('.listWrapper li').show().slice(3).hide();

http://api.jquery.com/slice/

可以删除.show()如果所有元素都是可见的最初。

如果您还没有包含jQuery对象的所有li元素和/或不必访问完整的元素列表，你可以避免在没有首先选择他们：

$('.listWrapper ul li:gt(2)').hide();

来源

2012-01-26 01:15:38 ThiefMaster

隐藏列表的一组对象数

回答

相关问题