如何仅在文档加载时显示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(); 
});