替代 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 扩展，不会在任何浏览器上原生。