Trova la posizione di un elemento all'interno di un elenco

Question

Sto cercando di trovare la posizione (ovvero l'ordine) di un elemento cliccato all'interno di un elenco utilizzando jQuery.

ho:

<ul> 
<li>Element 1</li> 
<li>Element 2</li> 
<li>Element 3</li> 
... 
</ul> 

Al clic di un <li>, voglio conservare la sua posizione all'interno di una variabile. Ad esempio, se avessi fatto clic su Element 3, quindi "3" sarebbe stato memorizzato in una variabile.

Come si può ottenere?

Grazie mille per il vostro aiuto!

Answer 1

Uso index():

$("li").click(function() { 
    var index = $(this).parent().children().index(this); 
    alert("You clicked item " + index); 
}); 

indici partono da 0.

Answer 2

risposta precedente funziona bene. 2 Costi aggiuntivi:
Quando l'elenco contiene listitems di <a> ad esempio:

<ul id="test"> 
    <li><a href="#">Element 1</a></li> 
    <hr /><hr /> 
    <li><a href="#">Element 2</a></li> 
    <li><a href="#">Element 3</a></li> 
</ul> 

allora è necessario utilizzare var index = $(this).parent().parent().children().index(this);

come anche nel precedente esempio, l'elenco contiene altri elementi come <hr /> di quanto si può utilizzare un filtro in var index = $(this).parent().parent().children("li").index(this); per darvi indice 2 per "elemento 3" invece di indice 4.

Answer 3

una versione più efficiente di risposta Cletus', che non richiede di trovare genitori e figli:

$("li").on("click", function() { 
 
    var index = $(this).index(); 
 
    alert(index); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
<li>Element 1</li> 
 
<li>Element 2</li> 
 
<li>Element 3</li> 
 
<li>Element 4</li> 
 
</ul>