通过jeq中的：eq（）选择器循环

Question

not working attempt : http://jsfiddle.net/ahrxvtaa/

I want to get 3, 6, 9 etc.. note that I use .css() just to see the result, please don't comment u can selector using css.

<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>

my js

$('.item').each(function(){
    $(this).eq(3).css('font-weight','bold');   
}

Answer 1

You can use .filter() like

 $('.item').filter(function(idx) { return idx > 2 && idx % 2 == 1 }).css('font-weight', 'bold'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> 

---

or if all these items are children of 1 parent and there are no other elements between them then use the :nth-child selector

 $('.item:nth-child(2n + 4)').css('font-weight', 'bold'); 

 .item:nth-child(2n + 4) { padding-left: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div> 

Answer 2

For jQuery 1.9 and above

 $('.item:nth-of-type(3n)').css('font-weight','bold'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"> </script> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> 

Answer 3

You can use the index argument with .each() :

$('.item').each(function(index){
    if (index % 3 === 2) {
         $(this).css('font-weight','bold');   
    }
}

You could also use .filter() like this:

$('.item').filter(function(index) {
    return index % 3 === 2;
}).css('font-weight','bold');   

As was pointed out, note that index of 0 is your item 1, index of 1 is your item 2, index 2 is your item 3, so to get 3,6,9 we look for a remainder of 2.

Answer 4

$('.item:nth-of-type(3n)').css('font-weight','bold'); 

这会起作用

Answer 5

Modulus is a good idea, this is for if the sequence isn't as predictable. You can pass in an array of what you are looking for.

var idx = [3,6,9];

for (var i = 0; i < idx.length; i++) {
   /* Subtract one 1 since it is a 0 based index... */
  $('.item').eq(idx[i]-1).css('font-weight','bold');  
};

or do the same thing with an each loop...

idx.each(function(i){
   $('.item').eq(i-1).css('font-weight','bold');
});