首頁 > web前端 > js教程 > 主體

jquery選擇器 :last與:last-child兩者的區別

黄舟
發布: 2017-06-23 15:08:20
原創
2623 人瀏覽過

今天寫$("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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板