jQuery назначить цвета списку li

Question

У меня есть 4 элемента, и я хочу назначить 4 разных цвета фона для каждой из ссылок, но я не хочу, чтобы цвета были рандомизированы. Скажем, если у меня есть эта структура

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

как это было бы возможно?

У меня есть список цветов. они (зеленый, синий, красный, черный)

Я попытался

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

Честно говоря, я не знаю, как бы я применить эти цвета. Я могу хранить их в массиве, но как бы я конкретизировал и назначил цвета?

Answer 1

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

скрипку является here.

Как вы просили парение эффекта по каждому пункту, применяя светлый цвет при наведении курсора мыши Я дал вам два примера 1.http://jsfiddle.net/NjqYA/2/2.http://jsfiddle.net/NjqYA/4/

Answer 2

Если вы не хотите, чтобы назначить класс или идентификатор для каждого отдельного <li>, то вы могли бы использовать п-й селектор ребенка, как так:

$("#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

как это? http://jsbin.com/oxaqub/5/edit#preview