在HTML列表中至多显示X个元素

我有html列表，其中包含可见和隐藏的元素。可见性随着时间的推移而动态变化（一些元素变得隐藏，一些显示）。在HTML列表中至多显示X个元素

<ul> 
    <li> </li> 
    <li style="display:none"> </li> 
    <li> </li> 
    <li style="display:none"> </li> 
    <li> </li> 
    <li> </li> 
    <li> </li> 
</ul>

我想是为了显示至多在X的元素，所以<li>已经超出X应隐藏列表。建议的方式是什么？我想出了两个想法：

设置的<ul>大小不变，并添加overflow: hidden（架空<li>的将不可见）。这很简单，但只有当<li>的大小恒定，并且您可以预测可以放入列表中的元素的数量时才有效。
使用JavaScript（我使用jQuery）来统计可见元素的数量并隐藏应该隐藏的元素。

您能否首选的方法或答案，如果有一种方法做，在纯CSS？

来源

2013-02-18 Mariusz Jamro

使用gt()选择，随着:visible

$('li:visible:gt(20)').hide()

另外，使用slice()：

$('li:visible').slice(20).hide()

来源

2013-02-18 11:37:15 Manishearth

它不会跳过已经隐藏的元素。 – 2013-02-18 11:39:32

@Secator：fixed :) – Manishearth 2013-02-18 11:40:40

酷！谢谢！ :) – 2013-02-18 11:42:42

你可以让这controlls隐藏可见元素的功能

function checkList() 
{  
    $('ul li:visible:gt(X)').hide(); 
}

和你需要永远调用这个函数y变成UL，它是LIs。我会建议一些更多的UL标识，也许通过ID属性。

来源

2013-02-18 11:42:58 Ejzy

使用第n个子选择器，您可以使用纯CSS进行存档。但请注意，IE不支持它。

在此示例而不是施加显示：无，我施加颜色：＃FF0000这样你就可以欣赏结果。将需要显示的LI元素数替换为4。

<style> 
    ul li:nth-child(1n+4) 
    { 
     color:#ff0000; 
    } 
</style> 


<ul> 
    <li> a </li> 
    <li> b </li> 
    <li> c </li> 
    <li> d</li> 
    <li> e </li> 
    <li> f </li> 
    <li> g </li> 
</ul>

来源

2013-02-18 12:24:14 Fico

在HTML列表中至多显示X个元素

回答

相关问题