How to add a class to a div dynamically using JavaScript or Jquery?

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 ?

A bit OT: are you using the class attribute for styling or to identify the DIV later on? If for identity purposes I would recommend giving each class an ID attribute rather than a class name using one of the techniques displayed in the answers below. — SaschaM78
– SaschaM78, Commented Feb 4, 2015 at 8:24

Murtaza Khursheed Hussain · Accepted Answer · 2015-02-04 09:05:33Z

2

How about something like this:

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

Check out the fiddle

edited Feb 4, 2015 at 9:05

Murtaza Khursheed Hussain

15.3k7 gold badges61 silver badges83 bronze badges

answered Feb 4, 2015 at 8:18

Guy Passy

7821 gold badge10 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Guy Passy Over a year ago

@MurtazaHussain ...what do you mean? How would you do it without each?

Brandon J Brotsky · Accepted Answer · 2015-02-04 08:17:09Z

1

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

answered Feb 4, 2015 at 8:17

Brandon J Brotsky

5234 silver badges15 bronze badges

2 Comments

Dieterg Over a year ago

You can use the iterator of your 'each' function

Brandon J Brotsky Over a year ago

one issue that you may find with my solution is that jQuery's .each function is super slow. It is better to use JavaScript for loop. Either way, this is a solution that gets the job done in an easy way to understand.

Lewis · Accepted Answer · 2015-02-04 08:14:17Z

0

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
}

answered Feb 4, 2015 at 8:14

Lewis

15k14 gold badges70 silver badges88 bronze badges

Comments

iamjansons · Accepted Answer · 2015-02-04 08:30:06Z

0

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

answered Feb 4, 2015 at 8:30

iamjansons

1241 silver badge13 bronze badges

Collectives™ on Stack Overflow

How to add a class to a div dynamically using JavaScript or Jquery?

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related