Znaleźć pozycję elementu na liście

Question

Szukam znaleźć pozycję (tj. Kolejność) klikniętego elementu na liście przy użyciu jQuery.

mam:

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

Na kliknięcie na <li>, chcę zapisać to położenie w obrębie zmiennej. Na przykład, jeśli kliknę element 3, to "3" zostanie zapisane w zmiennej.

Jak można to osiągnąć?

Wielkie dzięki za pomoc!

Answer 1

Zastosowanie index():

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

Indeksy zaczynają się od 0.

Answer 2

poprzednią odpowiedź działa dobrze. 2 dodatki:
Gdy lista zawiera ListItems z <a> na przykład:

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

następnie trzeba użyć var index = $(this).parent().parent().children().index(this);

Również jak w powyższym przykładzie lista zawiera inne elementy, takie jak <hr /> niż można użyć filtru w var index = $(this).parent().parent().children("li").index(this);, aby podać indeks 2 dla "elementu 3" zamiast wskaźnika 4.

Answer 3

Bardziej wydajna wersja odpowiedzi Cletus, która nie wymaga znalezienia rodziców i dzieci:

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