La différence entre le sélecteur jquery :last et :last-child

Aujourd'hui, j'ai écrit $("ul li:last-child").offset().top et j'ai trouvé une erreur, et $("ul li").last().offset() .top C'est vrai. La raison est la suivante :
Les deux sélecteurs correspondent au dernier élément de la collection. La différence est que :last correspondra au dernier élément de toutes les collections. Et :last-child correspondra à tous les derniers éléments enfants de la collection. :last renverra toujours un élément, tandis que :last-child peut renvoyer un lot d'éléments.
C'est ça !

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

Sélectionne tous les éléments qui sont le dernier enfant de leur 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");
});

Les deux sélecteurs correspondent à des ensembles Le dernier élément de l'ensemble, la différence est que :last correspondra au dernier élément de tous les ensembles. Et :last-child correspondra à tous les derniers éléments enfants de la collection. :last renverra toujours un élément, tandis que :last-child peut renvoyer un lot d'éléments.

$('div p:last') sélectionne le dernier élément P et le met en surbrillance. Le résultat est le suivant :

<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') sélectionnera tous les p sous-éléments situés à la fin du div et mettra en surbrillance :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!