nummer 패턴을위한 Jquery selector

Question

JS (jquery)를 사용하여 'i'를 1 3 5 6 9 10과 어떻게 일치시킬 수 있습니까?

<div class="questions"> 
    <ul> 
     <li class="cat_definition"> 
      <div class="question">What is ‘hair mass’?</div> 
     </li> 
     <li class="light cat_definition"> 
      <div class="question">What is the difference between 'hair mass' and 'hair volume'?</div> 
     </li> 
     <li class="light cat_ingredients clear"> 
      <div class="question">What does the Densify range smell like?</div> 
     </li> 
     <li class="cat_routine"> 
      <div class="question">How often should I use Densify products?</div> 
     </li> 
     <li class="cat_routine clear"> 
      <div class="question">How many consecutive days do the products need to be used to achieve the desired effect?</div> 
     </li> 
    </ul> 
</div> 

CSS :

.questions li{ 
    width : 50%; 
    float : left; 
    background:#f00; 
} 

.questions li:nth-child(4n+1), 
.questions li:nth-child(4n+4){ 
    background : #fff; 
} 
.questions li:nth-child(odd){ 
    clear : both; 
} 

나는이 이미지와 같은 다른 색상으로 측면에 의해 '리'블록 측을 넣어해야합니다. 나는 css3을 사용할 수 없으며 html에 클래스를 추가 할 수 없습니다. 나는 자바 스크립트에서 블록을 선택하고 블랙 박스에 대한 새로운 클래스를 추가해야합니다.

내가 시도 한 내용을 참조하십시오 : 당신은 무엇을 달성하고자하는 CSS에서 매우 쉽게 Fiddle

Answer 1

, 당신은 nth-child 함께 플레이해야합니다. 그 CSS 작업을 사용 :

.questions li{ 
    width : 50%; 
    float : left; 
    background:#f00; 
} 

.questions li:nth-child(4n+1), 
.questions li:nth-child(4n+4){ 
    background : #fff; 
} 
.questions li:nth-child(odd){ 
    clear : both; 
} 

http://jsfiddle.net/34oj7rhc/

문제 것은 브라우저 지원이다. nth-child은 IE8 이하에서는 지원되지 않습니다.

다행히 jQuery는 지원되지 않는 CSS 규칙을 허용합니다. 당신은 변경해야합니다

$('.questions li:nth-child(4n+1), .questions li:nth-child(4n+4)').addClass('white'); 
$('.questions li:nth-child(odd)').addClass('clr'); 

당신이 CSS :

.questions li{ 
    width : 50%; 
    float : left; 
    background:#f00; 
} 

.questions .white{ 
    background : #fff; 
} 
.questions .clr{ 
    clear : both; 
}