Ottenere l'ultimo figlio di ciascun genitore con jQuery

Question

C'è un modo semplice per selezionare l'ultimo li di ciascuno di questi elenchi con jQuery?

<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
</ul> 
<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
</ul> 
<ul> 
    <li>1</li> 
    <li>2</li> 
</ul> 

Ho provato questi due metodi ma entrambi restituiscono un solo elemento.

$("ul li").last() 
$("ul li:last") 

Vorrei utilizzare il CSS: last-child pseudo-classe, ma da quando è stato introdotto nel CSS3 e IE8 non lo supporta, non posso

Answer 1

Vorrei utilizzare il CSS: last-child pseudo-classe, ma da quando è stato introdotto nel CSS3 e IE8 non lo supporta, non posso

Puoi dal momento che stai usando jQuery per selezionare i tuoi elementi, perché jQuery implementa esso stesso in modo che i browser che non la supportano in modo nativo in CSS possano ancora usarlo:

$("ul li:last-child") 

Answer 2

Il selettore :last-child è quello che serve. Stessa logica del selettore CSS3 :last-child, ma è possibile utilizzarlo liberamente in jQuery poiché jQuery lo fornirà anche se il motore CSS del browser non lo capisce.

$("ul li:last-child") 

Dalla documentazione:

Mentre :last partite solo un singolo elemento, :last-child può corrispondere a più di un : uno per ciascun genitore.

Nice little demo attached

Answer 3

Soluzione:

$(document).ready(function() 
        { 
         $('ul li:last-child').css("color","red"); 
        }); 

controllare questo Fiddle: http://jsfiddle.net/ganeshprabhu1994/surve/2/