Dynamically adding classes to a specific instance of another class

Question

I'm trying to add a class to a specific instance of another class, while modifying the name of the class. This is the code i have:

for(var i = 0; i<3; i++){
            $('.formEntry')[i].addClass("form" + i);
    }

This is the code before the function is ran:

<fieldset class = "formEntry"></fieldset>
<fieldset class = "formEntry"></fieldset>
<fieldset class = "formEntry"></fieldset>

and this is the desired output.

<fieldset class = "formEntry form1"></fieldset>
<fieldset class = "formEntry form2"></fieldset>
<fieldset class = "formEntry form3"></fieldset>

Please help!

Jayesh's answer is fine, so I won't post another response, but if you're curious, your method doesn't work because $('.formEntry')[i] returns the native DOM element, which doesn't have an addClass function. You could either do $('.formEntry').eq(i) or $($('.formEntry')[i]) to get the proper jQuery object that you can call addClass on. (the former is probably better) — Matis Lepik
– Matis Lepik, Commented Jul 5, 2016 at 12:54
@MatisLepik Oh I see now. Thanks for clarifying; been stuck on this for a while :) — nutellasandwich
– nutellasandwich, Commented Jul 5, 2016 at 13:00

Jayesh Chitroda · Accepted Answer · 2016-07-05 12:59:55Z

1

You can use .each() for loop through all elements and add class using .addClass() method.

$(document).ready(function() {
 $(".formEntry").each(function(i) {
       $(this).addClass("form" + (i+1));
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<fieldset class = "formEntry"></fieldset>
<fieldset class = "formEntry"></fieldset>
<fieldset class = "formEntry"></fieldset>

edited Jul 5, 2016 at 12:59

answered Jul 5, 2016 at 12:51

Jayesh Chitroda

5,03915 silver badges18 bronze badges

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

Comments

Damon · Accepted Answer · 2016-07-05 12:56:52Z

0

You don't have to use each. addClass takes function as well.

$('formEntry').addClass(function(i) { return 'form' + (i+1) })

answered Jul 5, 2016 at 12:56

Damon

4,3562 gold badges19 silver badges27 bronze badges

Comments

Piyush Dhanotiya · Accepted Answer · 2016-07-05 12:57:07Z

0

Use this code for add class dynamically in loop...

jQuery(document).ready(function(){
  var i=1;
jQuery('.formEntry').each(function(){
  
jQuery(this).addClass('form'+i);
  i++;
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<fieldset class = "formEntry"></fieldset>
<fieldset class = "formEntry"></fieldset>
<fieldset class = "formEntry"></fieldset>

answered Jul 5, 2016 at 12:57

Piyush Dhanotiya

5795 silver badges18 bronze badges

Comments

Mohammaed Abed · Accepted Answer · 2016-07-05 15:40:04Z

0

You can use slice() :

for(var i = 0; i < 3; ++i){
 $('.formEntry').slice(i,(i + 1)).addClass("form" + i);
}

API JQuery

edited Jul 5, 2016 at 15:40

answered Jul 5, 2016 at 12:58

Mohammaed Abed

93 bronze badges

Collectives™ on Stack Overflow

Dynamically adding classes to a specific instance of another class

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related