CODEWITHSUNDEEP
javascriptjqueryhtml
Dragan Peric
Dragan Peric

Reputation: 79

Limit number of <li> elements in <ol> and <ul>

Is it possible to limit number of li elements in ol and ul directly through html?

If I want to do it with javascript or jquery, how would I do it?

Upvotes: 4

Views: 20303

Answers (4)

Cvetko Stavreski
Cvetko Stavreski

Reputation: 59

You can use class and li element to hide li under class (this wont hide all li on your page but the one under the specified class).

.class li:nth-of-type(1n+4) { display: none; };

Upvotes: 1

csum
csum

Reputation: 2002

jQuery provides selectors that can simplify this process. For example, if you want to remove li elements at an index greater than 2:

$('#myList li:gt(2)').remove();

Or you can simply hide via css if you like:

#myList li:nth-of-type(1n+4) {
  display: none;
}

Here's an example jsfiddle.

Upvotes: 5

cralfaro
cralfaro

Reputation: 5948

You can do it with CSS 3, if you finally want to hide them.

li:nth-of-type(1n+15) {
    display: none;
}

Upvotes: 13

jonny
jonny

Reputation: 3098

Here's something I knocked up quickly. My solution is just to hide the elements whose index exceeds some defined maximum - but you can use remove() just as easily. Take a look:

var max = 2;
$('ul, ol').each(function(){
  $(this).find('li').each(function(index){
    if(index >= max) $(this).hide()
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ol>

To the best of my knowledge, there's no way to do this natively in HTML. But it's very easy to do so in JS or jQuery.

Hope this helps.

Upvotes: 0

Related Questions