Geek Answers Handbook

Give each first, second, and third element a unique class using jQuery

I am using jQuery selector to return objects.

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

Objects do not have the same parent.

I want to give each class of objects like this:

 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 module. I know what 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 look?

+5
source share
4 answers

That 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.com/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>
+7
source

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

a% b returns c if and only if b divides ac, or, in other words, c is the rest of the Euclidean 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'); } }
0
source

The jQuery .each() method increments the index itself, so you do not need to increment it.

 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; } });
0
source

Since these elements are not 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>
0
source

More articles:


All Articles