Como selecionar o último elemento filho em jQuery?


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


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


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.


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


1

Olá a todos Por favor, experimentem esta propriedade

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

obrigado

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.