If I have markup like this:

<li class="supress hidden"></li>
<li class="supress hidden"></li>
<li class="supress hidden"></li>
<li class="supress hidden"></li>
<li class="supress hidden"></li>
<li class="supress hidden"></li>
<li class="supress hidden"></li>
<li class="supress hidden"></li>
<li class="supress hidden"></li>
<li class="supress hidden"></li>
<li class="supress hidden"></li>
<li class="supress hidden"></li>

I can remove the class="hidden" by writing:

if ($('.supress').hasClass('hidden')) {
    $('.supress').removeClass('hidden');
}   

Edit: Before I tried:

if ($('.supress:lt(5)').hasClass('hidden')) {
    $('.supress').removeClass('hidden');
}   

But what do I do if I only want to remove the "hidden" class from the the first five items?

If I have markup like this:

<li class="supress hidden"></li>
<li class="supress hidden"></li>
<li class="supress hidden"></li>
<li class="supress hidden"></li>
<li class="supress hidden"></li>
<li class="supress hidden"></li>
<li class="supress hidden"></li>
<li class="supress hidden"></li>
<li class="supress hidden"></li>
<li class="supress hidden"></li>
<li class="supress hidden"></li>
<li class="supress hidden"></li>

I can remove the class="hidden" by writing:

if ($('.supress').hasClass('hidden')) {
    $('.supress').removeClass('hidden');
}   

Edit: Before I tried:

if ($('.supress:lt(5)').hasClass('hidden')) {
    $('.supress').removeClass('hidden');
}   

But what do I do if I only want to remove the "hidden" class from the the first five items?

• javascript
• jquery

• 1 whathaveyoutried. – Jay Blanchard Commented Dec 12, 2012 at 18:13

5 Answers 5

$(".supress.hidden:lt(5)").removeClass('hidden')

You can get elements with more than one class, so you don't need to check if has class or not.

$('.supress.hidden').slice(0,5).removeClass('hidden');

I'd use $.slice to cut the first 5:

$('.supress.hidden').slice(0, 5).removeClass('hidden');

While you can use :lt selector for the same result, it's not remended on its own page:

Because :lt() is a jQuery extension and not part of the CSS specification, queries using :lt() cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. For better performance in modern browsers, use $("your-pure-css-selector").slice(0, index) instead.

$('.supress').each(function(i){
     if(i < 5 && $(this).hasClass('hidden')){
          $(this).removeClass('hidden');
     }
});

jQuery provides lots of ways to do this:

• Look at the jQuery methods for Traversing. In particular, you can use the .slice() method
• Look at the advanced selectors. In particular, '.supress:lt(5)'.