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

Question

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

Juste le dernier enfant, pas ses descendants.

Answer 1

Vous pouvez également le faire :

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

:last-child

Answer 2

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

Answer 3

En utilisant le sélecteur :last-child ?

Avez-vous un scénario spécifique en tête pour lequel vous avez besoin d'aide ?

Answer 4

Pour 2019 ...

La version 3.4.0 de jQuery supprime :first, :last, :eq, :even, :odd, :lt, :gt, et :nth. Lorsque nous supprimerons Sizzle, nous le remplacerons par un petit wrapper petit wrapper autour de querySelectorAll, et il serait presque impossible de réimplémenter ces sélecteurs sans un moteur de sélection plus important.

Nous pensons que ce compromis en vaut la peine. N'oubliez pas que nous continuerons à prendre en charge les méthodes positionnelles, telles que .first, .last et .eq. Tout ce que vous pouvez faire avec les sélecteurs positionnels, vous pouvez le faire avec les méthodes positionnelles. Elles sont de toute façon plus performantes.

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

Donc vous devriez maintenant utiliser .first() , .last() à la place (ou sans jQuery).

Answer 5

Si vous voulez sélectionner le dernier enfant et que vous devez être spécifique sur le type d'élément, vous pouvez utiliser le sélecteur dernier du 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, les paragraphes 4 et 5 auront tous deux une bordure rouge puisque le paragraphe 5 est le dernier élément de type "p" dans la division et que le paragraphe 4 est le dernier "span" dans la division.