Dynamically add css class with jquery

Question

I'm trying to add a CSS class to an element with jQuery. This class should be an increasing number. For example, myclass_1 then the next is myclass_2 and so on.

It's easy to add an increasing number with a PHP while loop, but I don't know how can I apply PHP code inside of jQuery. Or is there another way to do this?

jQuery('.myclass_').popup({ 
    //code
});

So, how can I add an increasing number after this .myclass_ ?

Any suggestions please!

Answer 1

Use a loop

var count = 5;

for(var i = 0; i < count; i++){
   jQuery('.myclass_'+i).popup({ 
       //code
   });
}

Answer 2

If you are using jQuery in your project then jQuery.each() API will ease your effort to get it done.

Fiddle - http://jsfiddle.net/ylokesh/bwdq8t5r/

One more suggestion, it would be good if you keep a generic class "myClass" on all nodes to be traversed and then append a new class with index number.

JavaScript [using jQuery.each()]

$('.myClass').each(function(index, element){
   $(element).addClass("myClass_" + index).text("Node " + index);
});

HTML

<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>