Der Unterschied zwischen dem JQuery-Selektor :last und :last-child

Heute habe ich $("ul li:last-child").offset().top geschrieben und einen Fehler gefunden, und $("ul li").last().offset() .top genau Das stimmt. Der Grund ist:
Beide Selektoren stimmen mit dem letzten Element in der Sammlung überein. Der Unterschied besteht darin, dass :last mit dem letzten Element in allen Sammlungen übereinstimmt. Und :last-child stimmt mit allen letzten untergeordneten Elementen in der Sammlung überein. :last gibt immer ein Element zurück, während :last-child möglicherweise einen Stapel von Elementen zurückgibt.
Das ist es!

: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:

Wählt alle Elemente aus, die das letzte untergeordnete Element ihres übergeordneten Elements sind.

<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");
});

Beide Selektoren sind übereinstimmende Mengen. Das letzte Element in Der Unterschied besteht darin, dass :last mit dem letzten Element in allen Sätzen übereinstimmt. Und :last-child stimmt mit allen letzten untergeordneten Elementen in der Sammlung überein. :last gibt immer ein Element zurück, während :last-child möglicherweise einen Stapel von Elementen zurückgibt.

$('div p:last') wählt das letzte P-Element aus und hebt es hervor. Das Ergebnis ist wie folgt:

<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') Wählt alle p untergeordneten Elemente aus, die sich im letzten Div befinden, und markiert:

<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>

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen dem JQuery-Selektor :last und :last-child. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!