如何使用带有jquery的nth-child（）对每个第二个孩子应用css

Question

您好，我希望每隔2 <li>

申请一次

我试过了

<script>
$(document).ready(function(){
$('#cl li:nth-child(2)').css('color', 'red');    
})
</script>

HTML

<ul id="cl">
  <li>home</li>
  <li>home2</li>
  <li>home3</li>
  <li>home4</li>
  <li>home5</li>
  <li>home6</li>
</ul>

我可以使用此代码仅在第二个孩子上应用样式。我怎样才能在每个第二个孩子身上应用风格

提前致谢 ：）

Answer 1

使用:odd选择器：

$('#cl li:odd').css('color', 'red');

http://api.jquery.com/odd-selector/

这是Jsfiddle：

http://jsfiddle.net/uKX3t/1/

您需要使用:odd而非:even的原因是因为子项为0索引，这意味着<li>home</li>是第0个孩子而<li>home2</li>是第一个孩子是奇怪的。

来自文档的引用：

  

特别要注意，基于0的索引意味着，   反直觉地，：奇数选择第二个元素，第四个元素，   在匹配的集合中等等。

奇怪的是，你需要使用odd选择器（双关语）

Answer 2

试试这个 -

$('#cl li:odd').css('color', 'red');