jquery选择器 :last与:last-child两者的区别
程序员文章站
2022-05-08 18:20:14
...
今天写$("ul li:last-child").offset().top发现报错,而$("ul li").last().offset().top就没错了。原因在于:
这两个选择器都是匹配集合中的最后一个元素,差别在于 :last 将匹配所有的集合中的最后一个元素。而 :last-child 将匹配集合中的所有位置为最后一个的子元素。:last 将永远返回一个元素,而 :last-child可能返回一批元素。
原来如此啊!
这两个选择器都是匹配集合中的最后一个元素,差别在于 :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剔除数组中指定值的元素
推荐阅读
-
jquery 层次选择器siblings与nextAll的区别介绍
-
Jquery中的层次选择器与find()的区别示例介绍
-
jquery 层次选择器siblings与nextAll的区别介绍_jquery
-
浅谈jquery选择器 :first与:first-child的区别
-
jquery选择器 :last与:last-child两者的区别
-
jQuery选择器:last-child的使用详解
-
jquery选择器:first-child与:last-child获取不到元素解决办法
-
jquery选择器 :last与:last-child两者的区别
-
jquery :has()和:contains()选择器两者之间的区别
-
jquery选择器:first-child和:last-child的用法实例总结