Question

I have html list, which contains visible and hidden elements. The visibility changes dynamically over time (some elements become hidden, some are shown).

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

What I want is the list to display at most X elements, so <li>s beyond X should be hidden. What is the suggested way of achiving that? I’ve come up with two ideas:

• Set constant size of <ul> and add overflow: hidden (overhead <li>‘s won’t be visible). It’s simple but will work only when <li>‘s have constant size and you can predict number of elements that will fit into the list.
• Use javascript (I use jQuery) to count number of visible elements and hide the one’s that should be hidden.

Can you suggest preferred approach or answer if there is a way to do that in pure CSS?

Answer 1

Use the gt() selector, along with :visible

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

Alternatively, use slice():

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