苏飞论坛

标题: jQuery子元素选择器（:nth-last-child）轻松了解 [打印本页]

作者: 范范 时间: 2018-3-15 21:26
标题: jQuery子元素选择器（:nth-last-child）轻松了解
jQuery子元素选择器（:nth-last-child）轻松了解

子元素选择器

jQuery的子元素选择器有很多，今天主要说下子元素选择器

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

 :nth-last-child(n|even|odd|formula) 的详细用法

:nth-last-child(n|even|odd|formula)

选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个
从选择器的名称就可以看到，里面的 last 就表示是从父元素所有子元素倒数开始计数，即：最后一个子元素，为1 开始向前计数

可以看到，该子元素选择器，有如下参数可以使用

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

1：n 匹配子元素的序号，就获取父元素的倒数第 n 个子元素   在此必须注意，此处是从 1 开始计数

2：even   匹配所有的偶数元素

3：odd  匹配所有的奇数元素

4：formula  使用特殊公式，如（an + b） 进行选择，其中n从 0 开始 与数学中的计算公式一样哈

1.n的用法

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

:nth-last-child(n)

获取每个ul的倒数第3个子元素
jQuery代码：

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

$("ul li:nth-last-child(3)")

输出结果：

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

[ <li>LiLi</li>,   <li>Glen</li> ]

2. :nth-last-child(even) 用法

获取每个ul的偶数元素
jQuery代码：

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

$("ul li:nth-last-child(even)")

输出结果：

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

[ <li>John</li>,   <li>Brandon</li>,   <li>Mr.Wang</li>,   <li>Tane</li> ]

3. :nth-last-child(odd) 用法

获取每个ul的奇数元素
jQuery代码：

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

$("ul li:nth-last-child(odd)")

输出结果：

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

[ <li>Karl</li>, <li>LiLi</li>, <li>YueYue</li>, <li>Glen</li>, <li>Ralph</li> ]

4. :nth-last-child(formula) 用法

获取每个ul的从倒数第2个子元素开始，匹配3的倍数的元素
jQuery代码：

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

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

输出结果：

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

[ <li>Karl</li>, <li>Mr.Wang</li>, <li>Tane</li> ]

例如： :nth-last-child(3n+2) 从倒数第二个子元素开始，匹配每个3的倍数的元素

附件

全部代码

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

<ul>

  <li>John</li>

  <li>Karl</li>

  <li>Brandon</li>

  <li>LiLi</li>

  <li>Mr.Wang</li>

  <li>YueYue</li>

</ul>

<ul>

  <li>Glen</li>

  <li>Tane</li>

  <li>Ralph</li>

</ul>

作者: 范范 时间: 2018-3-15 21:27
必须谨记，此子元素选择器是从最后一个子元素向前数以最后一个子元素为1 开始计数

作者: 范范 时间: 2018-3-15 21:28
与first 获取eq 是刚好相反的用法不过从英文就可以看出

作者: 站长苏飞 时间: 2018-3-15 21:50
强烈支持楼主ing……

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