jQuery 给页面所有 ul 中 li 进行奇偶性样式突显

范范

获取页面中所有ul中的第( 2n + 1 )个子元素，此方法主要用在对页面li进行奇偶性添加样式
获取是是获取所有table中的第( 2n + 1 )个子td，然后给第2个td加上一个固定的样式，进行突出显示等。

在这个时候，就需要用到 jQuery的子元素选择器   :nth-child
使用方式如下：1. 获取 每个ul 中的 奇 li元素

html代码：

[HTML] 纯文本查看 复制代码

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>

jQuery代码：

[C#] 纯文本查看 复制代码

$("ul li:nth-child(2n+1)")

输出结果：

[JavaScript] 纯文本查看 复制代码

[ <li>John</li>,   <li>Brandon</li>,   <li>Glen</li>,   <li>Ralph</li> ]

2. 获取 每个ul 中的 第2个子li元素
html代码：

[HTML] 纯文本查看 复制代码

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>

jQuery代码：

[C#] 纯文本查看 复制代码

$("ul li:nth-child(2)")

输出结果：

[JavaScript] 纯文本查看 复制代码

[ <li>Karl</li>,   <li>Tane</li> ]

3. 获取所有ul中的第一个li子元素
html代码：

[HTML] 纯文本查看 复制代码

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>

jQuery代码：

[JavaScript] 纯文本查看 复制代码

$("ul li:eq(1)")

输出结果：

[JavaScript] 纯文本查看 复制代码

[ <li>Karl</li> ]

范范

以上可以看出， :nth-child 是获取 一个list集合
eq 获取是单个的元素

范范

nth-child   索引从1 开始
eq从0开始进行计算