獲取HTML列表中項目的位置

Question

我需要知道HTML列表中項目的位置。

<ul> 
    <li>first</li> 
    <li>second</li> 
    <li>third</li> 
</ul> 

$('ul').on("click", function(event){ 
    var target = event.target; 
}) 

所以當我得到第一個li作爲事件的目標。如何才能得到0作爲項目位置的結果。我能想到的唯一方法是迭代所有項目並將它們與事件目標進行比較，但我想知道是否有更好的方法來解決這個問題。

Answer 1

你可以使用：

$('ul').on("click", function(event){ 
    var target = event.target, 
     index = $(target).index(); 
    console.log(target, index); 
}) 

JS Fiddle demo。

參考：

• index()。

Answer 2

var listItem = $(event.target); 
alert('Index: ' + $('ul > li').index(listItem)); 

Answer 3

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

http://jsfiddle.net/6QZbT/