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

Question

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

Solo el último hijo, no sus descendientes.

Answer 1

También puede hacer esto:

<ul id="example"> 
    <li>First</li> 
    <li>Second</li> 
    <li>Third</li> 
    <li>Fourth</li> 
</ul> 

// possible 1 
$('#example li:last').val(); 
// possible 2 
$('#example').children().last() 
// possible 3 
$('#example li:last-child').val(); 

:last

.children().last()

:last-child

Answer 2

¿Usando el :last-child selector?

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

Answer 3

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

o si quieres unos últimos hijos con una cierta clase como se ha comentado anteriormente.

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

o un elemento específico niño con una clase específica

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

Answer 4

Si desea seleccionar el último hijo que necesita ser específico del tipo de elemento que puede utilizar el selector last-of-type

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 bot h El párrafo 4 y 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 "lapso" en el div.