jqueryセレクター:lastと:last-childの違い

今日 $("ul li:last-child").offset().top と書いたら間違いが見つかりましたが、 $("ul li").last().offset().top は正しかったです。その理由は次のとおりです。
どちらのセレクターもコレクション内の最後の要素に一致します。違いは、:last がすべてのコレクション内の最後の要素に一致することです。そして、:last-child はコレクション内の最後の子要素すべてに一致します。 :last は常に 1 つの要素を返しますが、: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:

親の最後の子であるすべての要素を選択します。

<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 は常に 1 つの要素を返しますが、: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、ハイライト:

<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 中国語 Web サイトの他の関連記事を参照してください。