苏飞论坛

标题: jQuery 给页面所有 ul 中 li 进行奇偶性样式突显 [打印本页]

作者: 范范 时间: 2018-3-14 19:47
标题: 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> ]

作者: 范范 时间: 2018-3-14 19:48
以上可以看出， :nth-child 是获取一个list集合
eq 获取是单个的元素

作者: 范范 时间: 2018-3-14 19:49
nth-child 索引从1 开始
eq从0开始进行计算

欢迎光临苏飞论坛 (http://www.sufeinet.com/)