web-dev-qa-db-fra.com

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

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

Juste le dernier enfant, pas ses descendants.

jqueryjquery-selectors
76
lovespring

Vous pouvez aussi 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

. enfants (). last ()

: last-child

110
Yoram de Langen

Pour la performance:

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

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

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

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

$('#example').children('li.test').last()
42
Philip

En utilisant le : sélecteur du dernier enfant ?

Avez-vous un scénario particulier en tête pour lequel vous avez besoin d’aide?

9
Brad Christie

Si vous voulez sélectionner le dernier enfant et que vous devez être spécifique au type d'élément, vous pouvez utiliser le sélecteur dernier 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 car le paragraphe 5 est le dernier élément du type "p" dans la div et le paragraphe 4 est le dernier "étendue" dans la div.

1
ScottyG

Salut à tous s'il vous plaît essayer cette propriété

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

Merci

0
subindas pm

Pour 2019 ...

jQuery 3.4.0 est obsolète: premier,: dernier,: eq,: pair,: impair,: lt,: gt et: nth. Lorsque nous supprimerons 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 volumineux.

Nous pensons que ce compromis en vaut la peine. Gardez à l'esprit que nous continuerons à supporter les méthodes de positionnement, 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. Ils fonctionnent mieux quand même.

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

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

0
Christophe Roussy