Come selezionare l'ultimo elemento figlio in jQuery?

90

Solo l'ultimo bambino, non i suoi discendenti.

jquery jquery-selectors

— lovepring
fonte

129

Puoi anche farlo:

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

:ultimo

.children (). last ()

:ultimo bambino

— Yoram de Langen
fonte

4

Non penso children().last()ed :last-childè uguale. In questo esempio - sì, ma immagina di avere due elenchi (class = "example") e quindi prova a selezionare gli ultimi elementi da entrambi gli elenchi ...

— alekwisnia

@alekwisnia vedi il mio esempio qui sotto.

— Philip il

1

qual è il modo più veloce?

— Vic

@ Vic Non posso darti la risposta esatta ma le opzioni 3 sarebbero la logica. Perché l'opzione 2 salta due volte nel DOM utilizzando children(). L'opzione 1 lo fa una volta, ma ha uno pseudo selettore personalizzato / jQuery :lasted è :last-childgià qui da molto tempo, mi sembra che sarebbe il più veloce e richiede meno tempo di calcolo per ottenere il risultato.

— Yoram de Langen

48

Per la performance:

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

o se vuoi un ultimo bambino con una certa classe come commentato sopra.

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

o un elemento figlio specifico con una classe specifica

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

— Filippo
fonte

9

Usando il selettore: last-child ?

Hai in mente uno scenario specifico per il quale hai bisogno di assistenza?

— Brad Christie
fonte

2

Per il 2019 ...

jQuery 3.4.0 sta deprecando: first,: last,: eq,: even,: odd,: lt,: gt e: nth. Quando rimuoviamo Sizzle, lo sostituiremo con un piccolo wrapper attorno a querySelectorAll e sarebbe quasi impossibile reimplementare questi selettori senza un motore di selezione più grande.

Pensiamo che questo compromesso valga la pena. Tieni presente che continueremo a supportare i metodi posizionali, come .first, .last e .eq. Tutto ciò che puoi fare con i selettori posizionali, puoi farlo invece con metodi posizionali. Si comportano comunque meglio.

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

Quindi ora dovresti usare .first(), .last()invece (o no jQuery).

— Christophe Roussy
fonte

1

Se vuoi selezionare l'ultimo figlio e devi essere specifico sul tipo di elemento puoi usare il selettore last-of-type

Ecco un esempio:

$("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>

Nell'esempio sopra sia il paragrafo 4 che il paragrafo 5 avranno un bordo rosso poiché il paragrafo 5 è l'ultimo elemento del tipo "p" nel div e il paragrafo 4 è l'ultimo "intervallo" nel div.

— ScottyG
fonte

1

Ciao a tutti, per favore prova questa proprietà

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

Grazie

— sottoindici pm
fonte