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

Question

html

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

脚本

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's 制作一个图像 liek this 有时 Logo 会获得背景颜色，这会将颜色重置为灰色

目前我的代码不会重置颜色

问题:

如何一次迭代 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