jQuery添加类数字到x并重新开始

jQuery add class numericly up to x and start over

本文关键字：重新开始 数字 添加 jQuery      更新时间：2023-09-26

使用jQuery，我可以添加连续的数字类到列表项，如下所示:

  $(".item-list li").each(function (i) {
      $(this).addClass("item-list-" + i);
   });

所以HTML结构如下:

<ul class="item-list">
  <li>an item</li>
  <li>another item</li>
  <li>another item</li>
  <li>another item</li>
  <li>another item</li>
</ul>

…这将以数字顺序输出漂亮的列表项类:

class="item-list-0"
class="item-list-1"

…等等……

我要做的是编号到4项，然后重新从0开始编号。我想我必须在我的数字+ i代码中使用nth孩子，但我只是没能找到关于这方面的任何文档。我所发现的一切都与找到第n个元素有关，而不是在指定的数量之后重新开始计数。

您可以使用模数运算符本身:

$(".item-list li").each(function (i) {
    $(this).addClass("item-list-" + (i%4));
});

输出标记

<ul class="item-list">
    <li class="item-list-0">an item</li>
    <li class="item-list-1">another item</li>
    <li class="item-list-2">another item</li>
    <li class="item-list-3">another item</li>
    <li class="item-list-0">another item</li>
    <li class="item-list-1">another item</li>
    <li class="item-list-2">another item</li>
    <li class="item-list-3">another item</li>
    <li class="item-list-0">another item</li>
</ul>
演示

相关文章：