替代div背景颜色

Question

我在两列中有一系列div，其中一些javascript指示某些行为，我想让某些div类的背景颜色交替出现。

这是应该处理此问题的javascript：

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

使用样式表调用备用div背景颜色：

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>

现在，结果是“faq-title”类的每个div都有＃c1c1c1背景颜色，让我相信我错过了一些简单的东西。就像javascript建议的那样，我只希望交替的“faq-title”类div具有＃c1c1c1背景颜色，并且“faq-answer”div被忽略。

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扩展，在任何浏览器上都不是原生的。