Buscar la posición de un elemento dentro de una lista

Question

Estoy buscando la posición (es decir, el orden) de un elemento cliqueado dentro de una lista usando jQuery.

que tengo:

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

El clic de un <li>, quiero guardar su posición dentro de una variable. Por ejemplo, si hago clic en Elemento 3, entonces "3" se almacenará en una variable.

¿Cómo se pudo lograr esto?

¡Muchas gracias por su ayuda!

Answer 1

Uso index():

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

índices comienzan en 0.

Answer 2

respuesta anterior funciona bien. 2 adiciones:
Cuando su lista contiene ListItems de <a> por ejemplo:

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

entonces usted tiene que utilizar var index = $(this).parent().parent().children().index(this);

También como en el ejemplo anterior la lista contiene otros elementos como <hr /> que se puede utilizar un filtro en var index = $(this).parent().parent().children("li").index(this); para darle el índice 2 para "elemento 3" en lugar de índice 4.

Answer 3

Una versión más eficiente de la respuesta de Cletus, que no requiere encontrar padres e hijos:

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