隐藏一定数量的列表对象

Hide a set number of list objects

本文关键字：列表 对象 隐藏      更新时间：2023-09-26

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

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

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

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

演示

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

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

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

注意：您希望您的初始查询能够进入列表本身。

请参阅:gt()选择器文档。

http://jsfiddle.net/GEbxG/

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

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

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

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

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

$('.listWrapper ul li:gt(2)').hide();
相关文章：