¿Cómo seleccionar el último elemento secundario en jQuery?

90

Solo el último hijo, no sus descendientes.

jquery jquery-selectors

129

También puedes hacer esto:

<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 niño

— Yoram de Langen
fuente

4

No pienso children().last()y :last-childes igual. En este ejemplo, sí, pero imagina que tienes dos listas (clase = "ejemplo") y luego intenta seleccionar los últimos elementos de ambas listas ...

— alekwisnia

@alekwisnia vea mi ejemplo a continuación.

— Philip

1

cual camino es el mas rapido?

— Vic

@Vic No puedo darte la respuesta exacta, pero la opción 3 sería la lógica. Debido a que la opción 2 es saltar dos veces al DOM usando children(). La opción 1 lo está haciendo una vez, pero tiene un pseudo selector personalizado / jQuery :lasty ya :last-childha estado aquí bastante tiempo, me parece que sería la más rápida y requiere menos tiempo de cálculo para lograr el resultado.

— Yoram de Langen

48

Para el desempeño:

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

o si quieres un ultimo hijo con cierta clase como comentamos arriba.

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

o un elemento secundario específico con una clase específica

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

— Felipe
fuente

9

¿Usando el selector: last-child ?

¿Tiene un escenario específico en mente con el que necesita ayuda?

— Brad Christie
fuente

2

Para 2019 ...

jQuery 3.4.0 está desaprobado: primero,: último,: eq,: par,: impar,: lt,: gt y: nth. Cuando eliminemos Sizzle, lo reemplazaremos con un pequeño contenedor alrededor de querySelectorAll, y sería casi imposible volver a implementar estos selectores sin un motor de selección más grande.

Creemos que esta compensación vale la pena. Tenga en cuenta que seguiremos admitiendo los métodos posicionales, como .first, .last y .eq. Todo lo que pueda hacer con los selectores posicionales, puede hacerlo con métodos posicionales. Funcionan mejor de todos modos.

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

Por lo tanto, ahora debería usar .first(), en su .last()lugar (o no jQuery).

— Christophe Roussy
fuente

1

Si desea seleccionar el último hijo y necesita ser específico en el tipo de elemento, puede usar el selector de último tipo

Aquí hay un ejemplo:

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

En el ejemplo anterior, tanto el párrafo 4 como el párrafo 5 tendrán un borde rojo, ya que el párrafo 5 es el último elemento del tipo "p" en el div y el párrafo 4 es el último "intervalo" en el div.

— ScottyG
fuente

1

Hola a todos Por favor, prueben esta propiedad

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

Gracias

— subindas pm
fuente