使用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>