альтернативные цвета фона div

Question

У меня есть серия div в двух столбцах с некоторым javascript, диктующим какое-то поведение, и я бы хотел, чтобы цвета фона некоторых классов div чередуются.

Вот Javascript, что должен справиться с этим:

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

С таблицей стилей, вызывающей альтернативный цвет ДИВ фона:

div.alternate { background: #c1c1c1 } 

А вот HTML:

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

Right теперь результат каждого div класса «faq-title» имеет цвет фона # c1c1c1, leadin Мне кажется, что я пропустил что-то простое. Как и в случае с javascript, я хочу, чтобы только переменные класса «faq-title» имели цвет фона # c1c1c1, а div «faq-answer» игнорировались.

jsFiddle: http://jsfiddle.net/inerdial/mRaRW/

Answer 1

Как вы обнаружили, nth-child берет своей нумерации от родительского элемента, а не результаты конкретного селектора (см jquery documentation).

Использование :even, который делает то, что вы хотите:

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

http://jsfiddle.net/uJqPg/

Обратите внимание, что :even является 0 на основе, в то время как nth-child (после CSS спецификации) является 1-основе, следовательно, даже/нечетное несоответствие. Кроме того, :even является расширением jquery и не будет доступен в любом браузере.