javascript - 如何仅在文档加载时显示 UL 中的前 3 个元素？

Question

我有一个列表 (UL)，它有一个 .more_stories 类，UL 包含 LI。

我使用此代码在加载时默认隐藏它们:

$('ul.more_stories li').css({'display': 'none'});

现在我想在此之后显示 UL 中的前 3 个 li 项目。我如何在 jQuery 中做到这一点？

-注意:我有多个 UL 属于同一类。

我试了一下，结果出乎意料。

// more stories
$('ul.more_stories li').css({'display': 'none'});
$('ul.more_stories li:gt(2)').show();

提前致谢。

Answer 1

你想要 :lt() 选择器，像这样:

$('ul.more_stories li').hide();
$('ul.more_stories li:lt(3)').show();

或者，使用 .slice() 更简单/更快:

$('ul.more_stories li').hide().slice(0, 2).show();

这种方法将它们全部隐藏，然后使用相同的集合并取 0-2 个索引元素来显示。

---

你也可以反过来，从不隐藏前 3 个，像这样:

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

或者，再次使用 .slice() :

$('ul.more_stories li').slice(3).hide();

---

评论，使这项工作跨越多个<ul>元素，使用 .each() 循环，像这样:

$('ul.more_stories').each(function() {
  $(this).children().slice(3).hide(); 
});