li 배경색 반복/패턴

Question

WordPress 테마를 만들고 각 리가 다른 배경색 (예 : 빨간색, 녹색, 파란색)을 가진 탐색 모음을 만들려고합니다. 그런 다음 처음 세 가지 색상을 사용한 후에 다시 반복합니다. 예를 들어 너무

:

<div id="top-nav"> 
    <ul> 
     <a href="#"><li>Hampstead</li></a> background red 
     <a href="#"><li>Topsail Beach</li></a> background blue 
     <a href="#"><li>North Topsail Beach</li></a> background green 
     <a href="#"><li>Surf City</li></a> background red 
     <a href="#"><li>Holly Ridge</li></a> background blue 
     <a href="#"><li>Sneads Ferry</li></a> background green 
    </ul> 
</div> 

나는 자바 스크립트가 리 하위 번호를 인식하는 데 필요한 것입니다 상상한다.

누구에게이 작업을 수행 할 수있는 방법에 대한 통찰력이 있습니까?

감사합니다.

Answer 1

css nth-child selector을 사용하면 자바 스크립트없이 쉽게이 작업을 수행 할 수 있습니다.

li:nth-child(3n) 
{ 
    background:red; 
} 
li:nth-child(3n-1) 
{ 
    background:blue; 
} 
li:nth-child(3n-2) 
{ 
    background:green; 
} 

같은 것을 시도하고 오히려 jQuery를 사용하여이 작업을 수행 할 경우, 그것은 자신의 jQuery has an nth-child selector으로, 거의 동일합니다 . 그러면 다음과 같이됩니다.

$("li:nth-child(3n)").css('background-color', 'red'); 
$("li:nth-child(3n-1)").css('background-color', 'blue'); 
$("li:nth-child(3n-2)").css('background-color', 'green');