动态地将类添加到另一个类的特定实例

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!

Answer 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> 

Answer 2

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

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

Answer 3

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> 

Answer 4

You can use slice() :

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

API JQuery