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

Question

我有一个List（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(); 
});