获取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/