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

Answer 1

您快到了。

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

i<=val

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

.somecl{color:red;}

其他解决方案：

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

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

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

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

.somecl{color: red;}

您可以使用.eq()将匹配元素的集合减少到指定 index 处的元素。

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

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

.somecl{color: red;}

您还可以获取变量中的所有元素，然后使用循环将 i 的当前值设置为 index 的 class 变量中元素的大小。

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

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

.somecl{color: red;}

Answer 2

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

Location

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

.somecl{color: red;}

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>

使用jQuery HTML将类添加到索引

3 个答案: