jQuery dividiere Elemente und füge Klasse hinzu

Question

Ich möchte meine li-Elemente in meiner Navigation zählen und sie in vier Klassen aufteilen, um ihnen eine individuelle Rahmenfarbe zu geben.

Es sollte wie folgt aussehen:

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

Natürlich habe ich es dynamisch mit jQuery wollen.

Ich habe versucht:

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

aber, dass Codezahl alle li-Elemente in meinem ul ..

Dank für die Hilfe!

Answer 1

Sie können diese Klassen in einem Array speichern & Weisen Sie jedem li-Element eine Klasse zu, basierend auf dem Rest des Element-Index, geteilt durch 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>