如何按顺序将数组中的1个类应用于每个li？

Question

html

<ul class="logoUl">
    <li class="orange"></li>
    <li class="blue"></li>
    <li class="green"></li>
    <li class="pink"></li>
</ul>

SCRIPT

if (selectedCategory == 'currentAll') {

    var strString = "orange,blue,green,pink";
    var strArray = strString.split(',');

    $.each(strArray, function (index, value) {
        $("ul.logoUl > li").addClass(value)
    });
}

ul.logoUL中有4个li使图像谎言 有时徽标会获得背景颜色，将颜色重置为灰色

目前我的代码确实没有将颜色重置为

问题：

如果一次添加一个类，希望通过类获得原始颜色方案，如何一次遍历li一个？

Answer 1

var strString = "orange,blue,green,pink",
    strArray = strString.split(',');

$("ul.logoUl > li").each(function (index, value) {
    $(this).addClass(strArray[index]);
});

<强> DEMO

没有循环：

var strString = "orange,blue,green,pink",
    strArray = strString.split(',');

$("ul.logoUl > li").addClass(function (index) {
    return strArray[index];
});

<强> DEMO

注意

当您将class更改为每个li时，有时会给它们类似background，所以当您想再次给它们原始配色方案时，最好将其移除之前已分配颜色class，然后再次分配原始class，如下所示：

var strString = "orange,blue,green,pink",
    strArray = strString.split(',');

$("ul.logoUl > li")
    .removeClass() // first remove previous class
    .addClass(function (index) { // then add new class
        return strArray[index];
    });

<强> DEMO

Answer 2

您可以使用

if (selectedCategory == 'currentAll') {

    var strString = "orange,blue,green,pink";
    var strArray = strString.split(',');

    $.each(strArray, function (index, value) {
        $("ul.logoUl > li").eq(index).addClass(value)
    });
}

演示： http://jsfiddle.net/joycse06/j4qqS/