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

Question

使用 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"

... ETC...

我要做的是从4 个项目的数量，然后再次从零开始编号。我想我必须nth在我的数字代码中使用 child，+ i但我无法找到任何关于此的文档。我发现的所有内容都与找到第 n 个元素有关，但在指定数量后不开始计数。

Answer 1

您可以使用模数运算符本身来做到这一点：

$(".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>

演示