如何在jQuery中迭代唯一的类？

Question

我有这份名单，

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

我想动态地给它添加一个类，然后得到这样的结果，

<ul id="list">
  <li class="class-1">Item 1</li>
  <li class="class-2">Item 2</li>
  <li class="class-3">Item 3</li>
  <li class="class-4">Item 4</li>
  <li class="class-1">Item 5</li>
  <li class="class-2">Item 6</li>
</ul>

这是我的初始代码，

jQuery(function(){
  var list = jQuery('#list').children('li');
  var arr = ['class-1','class-2','class-3','class-4'];
  jQuery.each(arr, function(index, el) {
    list.addClass(el);
  });
});

但是它所做的就是添加每个列表项上的所有类。我想我真的不知道我在这里做什么。如果有人能给我指明正确的方向，我会非常感激的。

Answer 1

请重复你的列表而不是数组..。你可以试试这段代码

​

jQuery(function(){
  var list = jQuery('#list').children('li');
  var arr = ['class-1','class-2','class-3','class-4'];

  list.each(function(index, el) {
      $(el).addClass(arr[index % arr.length]);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>

​

Answer 2

你可以用each来做，

$('#list > li').each(function(i, elm) {
    $(this).addClass("class-" + ((i % 4) + 1));
});

演示

Answer 3

您可以使用*nth-child()伪选择器和基于数组长度和索引的方程以及jQuery.each()或forEach()数组迭代器。

jQuery(function() {
  var arr = ['class-1', 'class-2', 'class-3', 'class-4'],
    len = arr.length;
  jQuery.each(arr, function(i, v) {
    $('#list li:nth-child(' + len + 'n+' + (i + 1) + ')').addClass(v);
  })
})

.class-1 {
  color: red
}
.class-2 {
  color: green
}
.class-3 {
  color: blue
}
.class-4 {
  color: yellow
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

FYI :孩子是如何工作的？

​