如何为每4个子元素批量添加递增类名？

需求说明：为.carousel-slides-view-4下的.summary-item元素分组添加递增类名：

• 第1-4个元素添加summary-item-1
• 第5-8个元素添加summary-item-2
• 后续每4个元素为一组，类名序号依次递增，最后一组不足4个也按对应组号添加类名

修正后的代码 #

JavaScript #

$(document).ready(function() {
  $(".carousel-slides-view-4").each(function() {
    const items = $(this).find(".summary-item");
    const groupSize = 4;
    items.each(function(index) {
      // 计算当前元素所属组号，从1开始递增
      const groupNumber = Math.floor(index / groupSize) + 1;
      $(this).addClass(`summary-item-${groupNumber}`);
    });
  });
});

CSS #

.summary-item-1 {
  color: red;
}

.summary-item-2 {
  color: blue;
}

.summary-item-3 {
  color: green;
}

.summary-item-4 {
  color: yellow;
}

.summary-item-5 {
  color: orange;
}

.summary-item-6 {
  color: violet;
}

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="carousel-slides-view-4">
  <div class="summary-item">Item 1</div>
  <div class="summary-item">Item 2</div>
  <div class="summary-item">Item 3</div>
  <div class="summary-item">Item 4</div>
  <div class="summary-item">Item 5</div>
  <div class="summary-item">Item 6</div>
  <div class="summary-item">Item 7</div>
  <div class="summary-item">Item 8</div>
  <div class="summary-item">Item 9</div>
  <div class="summary-item">Item 10</div>
  <div class="summary-item">Item 11</div>
  <div class="summary-item">Item 12</div>
  <div class="summary-item">Item 13</div>
  <div class="summary-item">Item 14</div>
  <div class="summary-item">Item 15</div>
  <div class="summary-item">Item 16</div>
  <div class="summary-item">Item 17</div>
</div>

代码说明 #

• 遍历每个目标容器，获取容器内所有待处理的子元素
• 以4个元素为一组，通过元素的索引值计算所属组号（索引从0开始，组号从1开始递增）
• 为每个元素添加对应组号的类名，确保同一组内的所有元素拥有相同的递增类名

内容的提问来源于stack exchange，提问作者Houghtonator