Question

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

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

我想要的是最多显示X个元素的列表，因此应该隐藏超出X的<li>。建议的方法是什么？我想出了两个想法：

设置<ul>的常量大小并添加overflow: hidden（开销<li>将不可见）。这很简单，但只有在<li>具有恒定大小时才能工作，并且您可以预测适合列表的元素数量。
使用javascript（我使用jQuery）计算可见元素的数量并隐藏应隐藏的元素。

如果在纯CSS中有办法做到这一点，你能建议首选方法或答案吗？

Answer 1

使用gt()选择器以及:visible

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

或者，使用slice()：

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

Answer 2

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

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

并且您需要在每次更改UL和它的LI时调用该函数。我建议对UL进行更多识别，可能是通过ID属性。

Answer 3

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

在此示例中，我应用了颜色：＃ff0000 而不是应用显示：无，因此您可以欣赏结果。将4替换为需要显示的LI元素数。

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

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

3 个答案: