javascript - jQuery, change 5 items at a time - Stack Overflow

admin管理员组

文章数量:1026989

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

Share Improve this question Follow edited Dec 12, 2012 at 18:19 redconservatory asked Dec 12, 2012 at 18:01 redconservatoryredconservatory 22k4141 gold badges122122 silver badges193193 bronze badges 1

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

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 9

$(".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)'.

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

Share Improve this question Follow edited Dec 12, 2012 at 18:19 redconservatory asked Dec 12, 2012 at 18:01 redconservatoryredconservatory 22k4141 gold badges122122 silver badges193193 bronze badges 1

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

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 9

$(".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)'.

本文标签： JavaScriptJQuerychange 5 items at a timeStack Overflow