如何使用JavaScript或Jquery动态地将类添加到div？

Question

In my markup I have two div with same class . I want to add two different class in each div .

My html code is look like

<div class="my-class">
    --Content--
</div>

<div class="my-class">
    --Content--
</div>

But I want that two div as

<div class="my-class class-1">
    --Content--
</div>

<div class="my-class class-2">
    --Content--
</div>

So , if there is with a class "my-class" , I want to add an addition class to div like class-(1 to N) , How can I do this ?

Answer 1

How about something like this:

$('.my-class').each(function(ind, ele) {
    var id = (ind+1);
    $(ele).addClass('class-' + id);
});

Check out the fiddle

Answer 2

var c = 1;
$(".my-class").each(function(){
$(this).addClass("class-" + c);
c++;
});

Answer 3

This may be what you want.

var classes = document.querySelectorAll('.my-class');
for(var i=0;i<classes.length;i++){
    classes[i].classList.add('class-'+i); 
    //classes[i].className += 'class-'+i; -> older browsers
}

Answer 4

I would also use .each() function, here is jsfiddle for example.

$(".my-class").each(function(i) {
 $(this).addClass("yourClass"+(i+1));
});

This will do the magic.

Hope it helps