Add class to index using jquery html

Question

<tr>
 <td class="a 1"></td>
 <td class="a 2"></td>
 <td class="a 3"></td>
</tr>

<tr>
 <td class="b 4"></td>
 <td class="b 5"></td>
 <td class="b 6"></td>
</tr>

if(val){
  for(var i=0; i<val; i++){
    $('.'+i).addClass("somecl");    
  }    
}

How to add class looping through using index in jQuery?

Lets say, we have in val 3 it should add somecl class to class a 1, a 2 and a 3. And if it is val = 4 it should add somecl to a 1, a 2, a 3 and b 4 as well. How can I do that? Please guide.

Answer 1

You are nearly there.

Since there is no class named 0 exists, you can start the loop at i=1 and end when i<=val . I think you do not need the if condition here.

 var val = 3; for(var i=1; i<=val; i++){ $('.'+i).addClass("somecl"); } 

 .somecl{color:red;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td class="a 1">11</td> <td class="a 2">22</td> <td class="a 3">33</td> </tr> <tr> <td class="b 4">44</td> <td class="b 5">55</td> <td class="b 6">66</td> </tr> </table> 

Few Alternative Solutions:

You can use .each() to iterate over all the td to check if the element has the class or not. If has then add the class.

Please Note: index start from 0, that means 0 for first, 1 for second element and so on.

 var val = 3; $('td').each(function(i){ var i = i+1; if($(this).hasClass(i) && i <= val) $(this).addClass("somecl"); }); 

 .somecl{color: red;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td class="a 1">11</td> <td class="a 2">22</td> <td class="a 3">33</td> </tr> <tr> <td class="b 4">44</td> <td class="b 5">55</td> <td class="b 6">66</td> </tr> </table> 

You can use .eq() to reduce the set of matched elements to the one at the specified index .

 var val = 3; for(var i=0; i<val; i++){ $('td').eq(i).addClass("somecl"); } 

 .somecl{color: red;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td class="a 1">11</td> <td class="a 2">22</td> <td class="a 3">33</td> </tr> <tr> <td class="b 4">44</td> <td class="b 5">55</td> <td class="b 6">66</td> </tr> </table> 

You can also get all the elements in a variable, then use loop to set the class with the current i value as the index of the element in the variable.

 var el = $('td'); var val = 3; for(var i=0; i<val; i++){ $(el[i]).addClass("somecl"); } 

 .somecl{color: red;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td class="a 1">11</td> <td class="a 2">22</td> <td class="a 3">33</td> </tr> <tr> <td class="b 4">44</td> <td class="b 5">55</td> <td class="b 6">66</td> </tr> </table> 

Answer 2

The loop should ideally start from 1 to get the desired output.

  const val=4; if(val){ for(var i=1; i<=val; ++i){ $('.'+i).addClass("somecl"); } } 

 .somecl{color: red;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td class="a 1">11</td> <td class="a 2">22</td> <td class="a 3">33</td> </tr> <tr> <td class="b 4">44</td> <td class="b 5">55</td> <td class="b 6">66</td> </tr> </table> 

Answer 3

Try this :

 $(document).ready(function () { var val = prompt('Enter val : ') ; for(var i = 1; i <= val ; i++ ) { $('.' + i).addClass('somecl') ; } }) 

 .somecl { border: 1px solid orange ; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <table> <tr> <td class="a 1">a 1</td> <td class="a 2">a 2</td> <td class="a 3">a 3</td> </tr> <tr> <td class="b 4">b 4</td> <td class="b 5">b 5</td> <td class="b 6">b 6</td> </tr> </table>