How can I applying 1 class from an array to each li in order?

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)
    });
}

there are 4 li's in the ul.logoUL making an image liek this Some times the logo gets a background color which will reset the colors to gray

currently my code does this doesnt reset the colors back

Question:

How can iterate through li's one at a time while adding one class at a time in hopes to gain the original colors scheme via classes?

Answer 1

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

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

DEMO

Without loop:

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

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

DEMO

Note

As you're changing class to each li to give them similar background sometimes, so when you want to give them their original color scheme again, it would be better to remove previously assigned color class first and then assign original class again like following:

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