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

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

我想要的是列表最多显示X个元素，因此X之外的

s应该隐藏。实现这一目标的建议方法是什么？我有两个想法：

• 设置
  的恒定大小，并添加

  溢出：隐藏
  （开销
  将不可见）。它很简单，但只有当
  的大小不变，并且您可以预测适合列表的元素数量时，它才会起作用

• 使用javascript（我使用jQuery）计算可见元素的数量，并隐藏应该隐藏的元素

如果在纯CSS中有这样做的方法，您能推荐首选方法或答案吗？

使用选择器以及

或者，使用

slice（）

：

使用选择器以及

或者，使用

slice（）

：

---

您可以创建一个函数来控制可见元素的隐藏

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

您需要在每次更改UL和LIs时调用该函数。

---

我建议UL进行更多的标识，可能是通过ID属性。

您可以创建一个函数来控制可见元素的隐藏

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

您需要在每次更改UL和LIs时调用该函数。

---

我建议您通过ID属性对UL进行更多的识别。

使用第n个子选择器，您可以使用纯css实现它。但请注意IE不支持它

在本例中，我没有应用display:none，而是应用了颜色：#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>

ul li：第n个孩子（1n+4）
{
颜色：#ff0000；
}

a
b
c
d
e
f
g

使用第n个子选择器，您可以使用纯css实现它。但请注意IE不支持它

在本例中，我没有应用display:none，而是应用了颜色：#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>

ul li：第n个孩子（1n+4）
{
颜色：#ff0000；
}

a
b
c
d
e
f
g

<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>