时间戳

首页 > 解决方案 > 使用 jquery html 将类添加到索引

javascript - 使用 jquery html 将类添加到索引

问题描述

<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 中应该将somecl类添加到类 a 1、a 2 和 a 3。如果它是 val = 4，它也应该将somecl添加到 a 1、a 2、a 3 和 b 4。我怎样才能做到这一点？请指导。

标签： javascriptjquery

解决方案

你快到了。

由于不存在名为 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()将匹配元素集减少到指定索引处的元素。

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>

推荐阅读