2012-02-06 2 views
2

몇 가지 javascript로 몇 가지 동작을 지시하는 일련의 div가 있는데 특정 div 클래스의 배경색을 교대로 사용하고 싶습니다. html로 여기대체 div 배경색

div.alternate { background: #c1c1c1 } 

그리고 것 : 대체 DIV 배경색을 호출하는 스타일 시트와

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('#faqlist div.faq-title:nth-child(odd)').addClass('alternate'); 
    }); 
</script> 

: 여기

이 처리하기로 자바 스크립트의

<div id="faqlist"> 
<div class="faq-title"></div> 
<div class="faq-answer"></div> 
<div class="faq-title"></div> 
<div class="faq-answer"></div> 
<div class="faq-title"></div> 
<div class="faq-answer"></div> 
</div> 

오른쪽 이제 결과는 "faq-title"클래스의 모든 div가 # c1c1c1 배경색을 가지며, leadin g 나는 내가 무언가를 놓치고 있다고 믿는다. 자바 스크립트와 마찬가지로, "faq-title"클래스 div가 # c1c1c1 배경색을 가지도록하고 "faq-answer"div는 무시되도록합니다.

jsFiddle : http://jsfiddle.net/inerdial/mRaRW/ 당신이 발견 한 것처럼

+0

이 jQuery입니까? 그렇다면 아마 그 질문을 그와 같이 태그해야합니다. – millimoose

+1

제가 생각하기에는 문제는 선택기가 "클래스'.faq-title' *를 가진 div이고 부모의 홀수 번째 자식입니다" – millimoose

답변

1

, nth-child는 부모 요소로부터 번호를 소요, ​​특정 선택이 아닌 결과가합니다 (jquery documentation 참조).

당신이 원하는 것을 사용 :even, :

$('#faqlist div.faq-title:even') 
    .addClass('alternate'); 

http://jsfiddle.net/uJqPg/

:even 즉 0 기반 (CSS의 사양 다음) nth-child 인 반면 따라서, 1 기반 짝수/이상한 불일치. 또한 :even은 jquery 확장이며 모든 브라우저에서 기본으로 제공되지 않습니다.

+0

위대한 것입니다. 정확히 내가 찾던 해결책이었습니다. 고마워요 @ 게이브. – blackessej