javascript - 可选的 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 扩展，不会在任何浏览器上原生。