Como selecionar o último elemento filho em jQuery?

93

Como selecionar o último elemento filho em jQuery?

Apenas o último filho, não seus descendentes.

jquery jquery-selectors mola do amor
fonte

Respostas:

134

Você também pode fazer isso:

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

:último

.children (). last ()

: último filho

Yoram de Langen
fonte
4
Eu não penso children().last()e :last-childsou igual. Neste exemplo - sim, mas imagine que você tem duas listas (classe = "exemplo") e tente selecionar os últimos elementos de ambas as listas ...
alekwisnia
@alekwisnia veja meu exemplo abaixo.
Philip
1
qual caminho é o mais rápido?
Vic
@Vic Não posso te dar a resposta exata, mas a opção 3 seria a mais lógica. Porque a opção 2 está saltando duas vezes para o DOM usando children(). A opção 1 é fazer isso uma vez, mas tem um pseudo seletor customizado / jQuery :laste já :last-childestou aqui há muito tempo, me parece que seria o mais rápido e leva menos tempo de cálculo para atingir o resultado.
Yoram de Langen
49

Para desempenho:

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

ou se você quiser um último filho com uma determinada classe como comentado acima.

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

ou um elemento filho específico com uma classe específica

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

Usando o seletor: last-child ?

Você tem um cenário específico em mente para o qual precisa de ajuda?

Brad Christie
fonte
2

Se você deseja selecionar o último filho e precisa ser específico sobre o tipo de elemento você pode usar o seletor último do tipo

Aqui está um exemplo:

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

No exemplo acima, o Parágrafo 4 e o Parágrafo 5 terão uma borda vermelha, pois o Parágrafo 5 é o último elemento do tipo "p" na div e o Parágrafo 4 é o último "intervalo" na div.

ScottyG
fonte
2

Para 2019 ...

jQuery 3.4.0 está obsoleto: primeiro,: último,: eq,: par,: ímpar,: lt,: gt e: nth. Quando removermos o Sizzle, vamos substituí-lo por um pequeno invólucro em torno de querySelectorAll, e seria quase impossível reimplementar esses seletores sem um mecanismo seletor maior.

Achamos que vale a pena essa troca. Lembre-se de que ainda ofereceremos suporte aos métodos posicionais, como .first, .last e .eq. Tudo o que você pode fazer com seletores posicionais, você pode fazer com métodos posicionais. Eles têm um desempenho melhor de qualquer maneira.

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

Então você deve ser agora estar usando .first(), .last()em vez disso (ou nenhuma jQuery).

Christophe Roussy
fonte
1

Olá a todos Por favor, experimentem esta propriedade

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

obrigado

subindas pm
fonte