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