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>

范范

必须谨记，此子元素选择器 是从最后一个子元素向前数   以最后一个子元素为1 开始计数

范范

与first   获取eq 是刚好相反的用法   不过从英文就可以看出

站长苏飞

强烈支持楼主ing……