Comment sélectionner le dernier élément enfant dans jQuery?

90

Comment sélectionner le dernier élément enfant dans jQuery?

Juste le dernier enfant, pas ses descendants.

jquery jquery-selectors amour
la source

Réponses:

129

Vous pouvez également faire ceci:

<ul id="example">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
</ul>

// possibility 1
$('#example li:last').val();
// possibility 2
$('#example').children().last()
// possibility 3
$('#example li:last-child').val();

:dernier

.children (). last ()

:dernier enfant

Yoram de Langen
la source
4
Je ne pense pas children().last()et :last-childest égal. Dans cet exemple - oui, mais imaginez que vous avez deux listes (class = "exemple") et essayez ensuite de sélectionner les derniers éléments des deux listes ...
alekwisnia
@alekwisnia voir mon exemple ci-dessous.
Philip
1
quel chemin est le plus rapide?
Vic
@Vic Je ne peux pas vous donner la réponse exacte mais les options 3 seraient logiques. Parce que l'option 2 saute deux fois dans le DOM en utilisant children(). L'option 1 le fait une fois, mais a un pseudo-sélecteur personnalisé / jQuery :lastet est :last-childdéjà là depuis assez longtemps, me semble-t-il que ce serait le plus rapide et prend moins de temps de calcul pour obtenir le résultat.
Yoram de Langen
48

Pour la performance:

$('#example').children().last()

ou si vous voulez un dernier enfant avec une certaine classe comme commenté ci-dessus.

$('#example').children('.test').last()

ou un élément enfant spécifique avec une classe spécifique

$('#example').children('li.test').last()
Philippe
la source
2

Pour 2019 ...

jQuery 3.4.0 est obsolète: first,: last,: eq,: even,: odd,: lt,: gt et: nth. Lorsque nous supprimons Sizzle, nous le remplacerons par un petit wrapper autour de querySelectorAll, et il serait presque impossible de réimplémenter ces sélecteurs sans un moteur de sélection plus grand.

Nous pensons que ce compromis en vaut la peine. Gardez à l'esprit que nous prendrons toujours en charge les méthodes positionnelles, telles que .first, .last et .eq. Tout ce que vous pouvez faire avec les sélecteurs de position, vous pouvez le faire avec des méthodes de position à la place. Ils fonctionnent mieux de toute façon.

https://blog.jquery.com/2019/04/10/jquery-3-4-0-released/

Donc , vous devriez être maintenant en utilisant .first(), au .last()lieu (ou pas jQuery).

Christophe Roussy
la source
1

Si vous souhaitez sélectionner le dernier enfant et devez être précis sur le type d'élément, vous pouvez utiliser le sélecteur last-of-type

Voici un exemple:

$("div p:last-of-type").css("border", "3px solid red");
$("div span:last-of-type").css("border", "3px solid red");

<div id="example">
            <p>This is paragraph 1</p>
            <p>This is paragraph 2</p>
            <span>This is paragraph 3</span>
            <span>This is paragraph 4</span>
            <p>This is paragraph 5</p>
        </div>

Dans l'exemple ci-dessus, le paragraphe 4 et le paragraphe 5 auront une bordure rouge puisque le paragraphe 5 est le dernier élément de type "p" dans le div et le paragraphe 4 est le dernier "span" du div.

ScottyG
la source
1

Salut à tous Veuillez essayer cette propriété

$( "p span" ).last().addClass( "highlight" );

Merci

subindas pm
la source