jQuery делят элементы и добавляют класс

Question

Я хочу подсчитать свои li-элементы в своей навигации и разделить их на четыре класса, чтобы получить их индивидуальный пограничный цвет.

Он должен выглядеть следующим образом:

<ul> 
    <li class="red"></li> 
    <li class="yellow"></li> 
    <li class="green"></li> 
    <li class="blue"></li> 
    <li class="red"></li> 
    <li class="yellow"></li> 
    <li class="green"></li> 
    <li class="blue"></li> 
</ul> 

Конечно, я хочу его динамически с помощью JQuery.

Я пробовал:

$('#navbar li').each(function(i) { 
    $(this).addClass('className-' + i); 
}); 

но счетчик кода все Li-элементы в моей ул ..

Спасибо за помощь!

Answer 1

Эти классы можно хранить в массиве & присваивать класс каждому элементу li на основе остатка индекса элемента при его делении на 4 (i% 4).

var classNames=['red','yellow','green','blue']; 
 
$('li').each(function(i) { 
 
    $(this).addClass(classNames[i%4]); 
 
});

.red{ 
 
    color:red; 
 
    } 
 
.yellow{ 
 
    color:yellow; 
 
    } 
 
.green{ 
 
    color:green; 
 
    } 
 
.blue{ 
 
    color:blue; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
    <li>Six</li> 
 
    <li>Seven</li> 
 
    <li>Eight</li> 
 
    <li>Nine</li> 
 
    <li>Ten</li> 
 
</ul>