如何在jQuery中迭代唯一类？

我有这个名单

<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>

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

您可以将伪选择器与基于数组长度和索引的等式以及或数组迭代器一起使用

---

jQuery（函数（）{
var arr=['class-1'、'class-2'、'class-3'、'class-4']，
len=arr.长度；
jQuery.each（arr，function（i，v）{
$（'#list li:n个child（'+len+'n+'+（i+1）+'））.addClass（v）；
})
})

.class-1{
颜色：红色
}
.二级{
颜色：绿色
}
.三级{
颜色：蓝色
}
.四级{
颜色：黄色
}

项目1
项目2
项目3
项目4
项目5
项目6

您可以将伪选择器与基于数组长度和索引的等式以及或数组迭代器一起使用

---

jQuery（函数（）{
var arr=['class-1'、'class-2'、'class-3'、'class-4']，
len=arr.长度；
jQuery.each（arr，function（i，v）{
$（'#list li:n个child（'+len+'n+'+（i+1）+'））.addClass（v）；
})
})

.class-1{
颜色：红色
}
.二级{
颜色：绿色
}
.三级{
颜色：蓝色
}
.四级{
颜色：黄色
}

项目1
项目2
项目3
项目4
项目5
项目6

您可以使用

每个

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

您可以使用
每个

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

您正在迭代列表而不是数组

也许你可以考虑这个问题：

jQuery(function(){
  var list = jQuery('#list').children('li');

  jQuery.each(list, function(index, el) {
    $(this).addClass('class-' + (index % 4));
  });

});

您正在迭代列表而不是数组

也许你可以考虑这个问题：

jQuery(function(){
  var list = jQuery('#list').children('li');

  jQuery.each(list, function(index, el) {
    $(this).addClass('class-' + (index % 4));
  });

});

请遍历您的列表，而不是数组。。。
你可以试试这个代码


jQuery（函数（）{
var list=jQuery（'#list'）。children（'li'）；
var arr=['class-1'、'class-2'、'class-3'、'class-4']；
列表。每个功能（索引，el）{
$（el）.addClass（arr[索引%arr.length]）；
});
});


项目1
项目2
项目3
项目4
项目5
项目6
请在列表上迭代，而不是数组。。。
你可以试试这个代码


jQuery（函数（）{
var list=jQuery（'#list'）。children（'li'）；
var arr=['class-1'、'class-2'、'class-3'、'class-4']；
列表。每个功能（索引，el）{
$（el）.addClass（arr[索引%arr.length]）；
});
});


项目1
项目2
项目3
项目4
项目5
项目6

您可以在列表中迭代并使用索引，然后获得
%4


var list=jQuery（'#list'）。children（'li'）；
var arr=['class-1'，'class-2'，'class-3'，'class-4']；
$（'#list li'）。每个（函数（索引，el）{
console.log（索引）
$（此）.addClass（arr[索引%4]）
});
.class-1{
颜色：红色
}
.二级{
颜色：黑色
}
.三级{
颜色：黄色
}
.四级{
颜色：绿色
}


项目1
项目2
项目3
项目4
项目5
项目6

您可以在列表中迭代并使用索引，然后获得
%4


var list=jQuery（'#list'）。children（'li'）；
var arr=['class-1'，'class-2'，'class-3'，'class-4']；
$（'#list li'）。每个（函数（索引，el）{
console.log（索引）
$（此）.addClass（arr[索引%4]）
});
.class-1{
颜色：红色
}
.二级{
颜色：黑色
}
.三级{
颜色：黄色
}
.四级{
颜色：绿色
}


项目1
项目2
项目3
项目4
项目5
项目6
在查看了每个人的答案后，我得到了这个答案

jQuery(function(){
    var list = jQuery('#list').children('li');

    var arr = [
        'class-1',
        'class-2',
        'class-3',
        'class-4'
    ];


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

谢谢大家的帮助。
在回顾了每个人的答案后，我收到了这个

jQuery(function(){
    var list = jQuery('#list').children('li');

    var arr = [
        'class-1',
        'class-2',
        'class-3',
        'class-4'
    ];


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

谢谢大家的帮助。
您可以使用
.addClass
和通过索引的函数：


jQuery（函数（$）{
变量类别=['class-1'、'class-2'、'class-3'、'class-4']；
$（'#list>li'）.addClass（函数（索引）{
返回类[索引%classes.length]；
});
});
.class-1{颜色：红色}
.class-2{颜色：蓝色}
.class-3{颜色：绿色}
.class-4{颜色：黄色}


项目1
项目2
项目3
项目4
项目5
项目6
您可以将
.addClass
与通过索引的函数一起使用：


jQuery（函数（$）{
变量类别=['class-1'、'class-2'、'class-3'、'class-4']；
$（'#list>li'）.addClass（函数（索引）{
返回类[索引%classes.length]；
});
});
.class-1{颜色：红色}
.class-2{颜色：蓝色}
.class-3{颜色：绿色}
.class-4{颜色：黄色}


项目1
项目2
项目3
项目4
项目5
项目6
也许你应该迭代你的列表而不是数组。也许你应该迭代你的列表而不是数组。@user1448731:乐意帮助：）@user1448731:乐意帮助：）如果
list
的长度大于
arr
@Barmar，这不起作用。谢谢你指出这一点。我是从他的代码中重构的如果
list
的长度大于
arr
@Barmar，这就行不通了谢谢你指出这一点。我是从他的代码中重构的谢谢你的工作。我喜欢这个解决方案的一个事实是，不管我的类数组有多长，也不管我使用的类名是什么。谢谢你，这是可行的。我喜欢这个解决方案的一个事实是，不管我的类数组有多长，也不管它的类名是什么