苏飞论坛

标题: jQuery获取每个父元素的最后一个子元素方法 [打印本页]

作者: 范范 时间: 2018-3-12 21:31
标题: jQuery获取每个父元素的最后一个子元素方法
:last-child 子元素选择器，释义如下：
匹配最后一个子元素，为每个父元素，匹配最后一个子元素

与之前讲解的 :first-child 相反， :firt-child 匹配每一个父元素的第一个子元素

而:last 选择器，是只匹配最后一个元素

以下是几种选择器的比较内容，可以根据输出结果，对选择器 :last-child :first-child :last 进行比较
具体实例如下：
html代码：

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

<ul>

  <li>John</li>

  <li>Karl</li>

  <li>Brandon</li>

</ul>

<ul>

  <li>Glen</li>

  <li>Tane</li>

  <li>Ralph</li>

</ul>

在每个ul中查找最后一个li
:last-child jQuery代码如下：

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

$("ul li:last-child")

输出代码如下：

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

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

在每个ul中查找第一个li
:first-child jQuery代码如下：

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

$("ul li:first-child")

输出代码如下：

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

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

在所有ul中，查找最后一个li
:last jQuery代码如下：

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

$("ul li:last")

输出代码如下：

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

[ <li>Ralph</li> ]

作者: 范范 时间: 2018-3-12 22:21
上述内容可以看出， :last-child :first-child 获取的都是一个list 就是符合条件的每个 a 的子元素的最后一个或者第一个

作者: 范范 时间: 2018-3-12 22:22
:last :first 获取的都是一个单一的元素就是获取匹配的所有a下的最后一个或者第一个子元素

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