jquery - 通过jquery动态添加类名到div

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>