jquery选择器 :last与:last-child两者的区别-js教程-PHP中文网

jquery选择器 :last与:last-child两者的区别

黄舟

发布： 2017-06-23 15:08:20

原创

2474人浏览过

今天写$("ul li:last-child").offset().top发现报错，而$("ul li").last().offset().top就没错了。原因在于：
这两个选择器都是匹配集合中的最后一个元素，差别在于 :last 将匹配所有的集合中的最后一个元素。而 :last-child 将匹配集合中的所有位置为最后一个的子元素。:last 将永远返回一个元素，而 :last-child可能返回一批元素。
原来如此啊！

:last Selects the last matched element.
Note that :last selects a single element by filtering the current jQuery collection and matching the last element within it.
Additional Notes:
Because :last is a jQuery extension and not part of the CSS specification, queries using 
:last cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. 
To achieve the best performance when using :last to select elements, first select the elements using a pure CSS selector, then use.filter(":last").

登录后复制

:last-child:

Selects all elements that are the last child of their parent.

<div>
<span>John,</span>
<span>Karl,</span>
<span>Brandon,</span>
<span>Sam</span>
</div>
<div>
<span>Glen,</span>
<span>Tane,</span>
 
<span>Ralph,</span>
<span>David</span>
</div>
<script>
$("div span:last-child")
.css({color:"red", fontSize:"80%"})
.hover(function () {
$(this).addClass("solast");
}, function () {
$(this).removeClass("solast");
});

登录后复制

这两个选择器都是匹配集合中的最后一个元素，差别在于 :last 将匹配所有的集合中的最后一个元素。而 :last-child 将匹配集合中的所有位置为最后一个的子元素。:last 将永远返回一个元素，而 :last-child可能返回一批元素。

$('div p:last') 选择最后一个P元素并高亮显示得出结果如下:

<div>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
</div>
<div>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
</div>
<div>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
</div>

登录后复制

$('div p:last-child') 将选择所有位于div最后一个p子元素，并高亮:

<div>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
</div>
<div>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
</div>
<div>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
</div>

登录后复制

以上就是jquery选择器 :last与:last-child两者的区别的详细内容，更多请关注php中文网其它相关文章！