jQuery Farben zuweisen Li-Liste

Question

Ich habe 4 Elemente in und ich möchte 4 verschiedene Hintergrundfarbe zu jedem der Links zuweisen, aber ich möchte nicht die Farben randomize .. sagen wir, wenn ich diese Struktur haben

<div id="div_id"> 
<ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About Us</a></li> 
    <li><a href="#">Contact Us</a></li> 
    <li><a href="#">More Info</a></li> 
</ul> 
</div> 

Wie wäre das möglich?

Ich habe die Liste der Farben. sie sind (grün, blau, rot, schwarz)

versuchte ich

$("#div_id ul li").each(function() { 
$(this).css("background","green"); 
}); 

Um ehrlich zu sein, ich weiß nicht, wie würde ich diese Farben anwenden. Ich kann sie in einem Array speichern, aber wie würde ich die Farben loopen und zuweisen?

Answer 1

​$(document).ready(function(){ 
    var color=['red','green','blue','yellow']; 
    $('#div_id ul li').each(function(i){ 
     $(this).css('backgroundColor',color[i]); 
    }); 
});​ 

Eine Geige ist here.

Wie Sie für einen Hover-Effekt für jedes Element gefragt durch eine helle Farbe auf schweben Anwendung Ich habe habe Ihnen zwei Beispiele 1.http://jsfiddle.net/NjqYA/2/2.http://jsfiddle.net/NjqYA/4/

Answer 2

Wenn Sie nicht eine Klasse oder ID zu jedem der einzelnen <li> dann zuweisen wollen Sie das n-te Kind Selektor wie so verwenden könnten:

$("#div_id li:nth-child(1)").css({"background-color":"red"}); 
$("#div_id li:nth-child(2)").css({"background-color":"green"}); 
$("#div_id li:nth-child(3)").css({"background-color":"blue"}); 
$("#div_id li:nth-child(4)").css({"background-color":"yellow"}); 

Answer 3

so? http://jsbin.com/oxaqub/5/edit#preview