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