通过jquery

Question

我正在尝试通过jquery动态地将类名添加到多个div中。 我的要求就像 例如，我们有10个div

<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>

我想为计数器每三个div动态添加一个类名，如下所示。

<div class="sec sec_1"></div>
<div class="sec sec_1"></div>
<div class="sec sec_1"></div>

<div class="sec sec_2"></div>
<div class="sec sec_2"></div>
<div class="sec sec_2"></div>

<div class="sec sec_3"></div>
<div class="sec sec_3"></div>
<div class="sec sec_3"></div>

<div class="sec sec_4"></div>

请帮助我实现这一目标。

Answer 1

var counter = 0;
$("div").each(function(index) {
  if (index % 3 == 0) {
    counter++;
  }
  $(this).addClass('sec_' + counter);
});

<强>样本

var counter = 0;
$("div").each(function(index) {
  if (index % 3 == 0) {
    counter++;
  }
  $(this).addClass('sec_' + counter);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sec">a</div>
<div class="sec">a</div>
<div class="sec">a</div>
<div class="sec">a</div>
<div class="sec">a</div>
<div class="sec">a</div>
<div class="sec">a</div>
<div class="sec">a</div>
<div class="sec">a</div>
<div class="sec">a</div>

Answer 2

只需找到所有带有班级名称的div＆＃39; sec＆＃39;然后通过循环

为它们分配id

var resCtr = 1
var indexCtr = 1
$('.sec').each(function(i, obj) {
      $(this).addClass('sec_' + indexCtr);
      if (resCtr == 3 ) {
         resCtr = 1;
         indexCtr++;
      }
      resCtr++;

});

这是一个工作小提琴：Auto assign Class

Answer 3

是的，您可以像这样使用嵌套循环：

var ar=$("div.sec");
  var suffix=1;
  for(var i=0;i<ar.length;i++){
    for(var j=1;j<=3;j++){
        $(ar[i]).addClass("sec_"+suffix);//.text("sec_"+ suffix);
      i++
    }
    suffix++;
  }

这是 enter link description here