使用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");    
  }    
}

如何通过使用jQuery中的索引添加类循环？

可以说，我们在val 3中应该在class 1，a 2和3中添加somecl类。如果val = 4，则也应该在1，a 2，a 3和b 4中添加somecl 。 我怎样才能做到这一点？ 请指导。

Answer 1

你快到了。

由于不存在名为0的类 ，因此可以在i=1处开始循环，在i<=val结束。 我认为您在这里不需要if条件。

 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> 

很少有替代解决方案：

您可以使用.each（）遍历所有td来检查元素是否具有该类。 如果有则添加类。

请注意： 索引从0开始，表示第一个为0，第二个元素为1，依此类推。

 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> 

您可以使用.eq（）将匹配的元素集减少为指定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> 

您还可以获取变量中的所有元素，然后使用循环将具有当前i值的类设置为变量中元素的索引 。

 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

理想情况下，环路应从1开始以获得所需的输出。

  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

尝试这个 ：

 $(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>