I'm using a jQuery selector to return objects.

For example var target = $('.target'); will return 6 objects.

The objects do not have the same parent.

I want to give each object classes like so:

target[0].addClass('top');
target[1].addClass('middle');
target[2].addClass('low');
target[3].addClass('top');
target[4].addClass('middle');
target[5].addClass('low');

And so on... I thought I could use some modulus. I know the following is wrong.

target.each(function(index){
    index += 1;

    if (index % 3 === 0) {
      $(this).addClass('low');
    } else if(index % 2 === 0) {
      $(this).addClass('middle');
    } else {
      $(this).addClass('top');
    }
}

Is there an easy way that i'm over looking?

I'm using a jQuery selector to return objects.

For example var target = $('.target'); will return 6 objects.

The objects do not have the same parent.

I want to give each object classes like so:

target[0].addClass('top');
target[1].addClass('middle');
target[2].addClass('low');
target[3].addClass('top');
target[4].addClass('middle');
target[5].addClass('low');

And so on... I thought I could use some modulus. I know the following is wrong.

target.each(function(index){
    index += 1;

    if (index % 3 === 0) {
      $(this).addClass('low');
    } else if(index % 2 === 0) {
      $(this).addClass('middle');
    } else {
      $(this).addClass('top');
    }
}

Is there an easy way that i'm over looking?

• javascript
• jquery

• Although they don't share the same parent, nth-child() may still be able to be used. All depends on the markup. – user1106925 Commented Sep 16, 2015 at 0:20
• ...and your code would have been correct, except that you need to keep the same % 3 for each, but pare to 0, 1 and 2. – user1106925 Commented Sep 16, 2015 at 0:25

4 Answers 4

This should do what you want

var classes = ['top', 'middle', 'low'];

target.each(function(index){
    $(this).addClass( classes[index % 3] );
}

Working demo

var classes = ['top', 'middle', 'low'];

$(function() {
  var target = $('.target');
  target.each(function(index) {
    $(this).addClass(classes[index % 3]);
  });
});

.top {
  color: red;
}
.middle {
  color: green;
}
.low {
  color: cyan;
}

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

jQuery's .each() method increments the index itself, so you don't need to do the incrementation.

var target = $('.target');
target.each(function (i, el) {
    switch (i % 3) {
        default:
            break;
        case 0:
            $(this).addClass("top")
            break;
        case 1:
            $(this).addClass("middle")
            break;
        case 2:
            $(this).addClass("bottom")
            break;
    }

});

As this elements aren't children of the same parent, you should try something like this.

<div>Top 1</div>
<div>Middle 1</div>
<div>Low 1</div>
<div>Top 2</div>
<div>Middle 2</div>
<div>Low 2</div>

<script>
$('div:nth-child(3n+1)').addClass("top");
$('div:nth-child(3n+2)').addClass("middle");
$('div:nth-child(3n+3)').addClass("low");
</script>

You need to use the modulus operator, but first understand how it works:

a % b returns c if and only if b divides a-c, or in other words c is the rest of the euclidian division of a over b.

Now this will work :

target.each(function(index){
    if (index % 3 === 0) {
      $(this).addClass('low');
    } else if(index % 3 === 1) {
      $(this).addClass('middle');
    } else {
      $(this).addClass('top');
    }
}