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

90

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

Solo el último hijo, no sus descendientes.

jquery jquery-selectors Amantes de la primavera
fuente

Respuestas:

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