Question

我在页面上有多个具有相同结构的列表对象：例如：

<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个对象显示在每个列表中，其余的被隐藏？

Answer 1

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

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

<强> Demo

Answer 2

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

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

jsFiddle

有必要使用额外的li在两次传递中查询目标find()。否则，如果有多个ul s，则所有li将被视为单个集合，并且仅显示3个总列表项。 这样我们hide()选择项目的次数与列表一样多。

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

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

Answer 3

http://jsfiddle.net/GEbxG/

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

Answer 4

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

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

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

如果您还没有包含所有li元素的jQuery对象和/或不需要访问完整元素列表，则可以避免在第一时间选择它们：

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

隐藏一定数量的列表对象

4 个答案: