javascript - 使用 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 中使用索引添加 class 循环？

比方说，我们在 val 3 中应该将 somecl 类添加到类 a 1、a 2 和 a 3。 如果它是 val = 4，它也应该将 somecl 添加到 a 1、a 2、a 3 和 b 4。 我怎样才能做到这一点？请指导。

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 以检查元素是否具有类。如果有则添加类。

请注意: index 从 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()将匹配元素集减少到指定索引处的元素。

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>