获取元素的索引作为相对于父元素的子元素

假设我有这个标记：

<ul id="wizard"> <li>Step 1</li> <li>Step 2</li> </ul> 

我有这个jQuery：

 $("#wizard li").click(function () { // alert index of li relative to ul parent }); 

当点击那个li时，我怎么能得到相对于它的父母的孩子li的索引？

例如，当您点击“步骤1”时，popup一个“0”的alert 。

Answer 1

 $("#wizard li").click(function () { console.log( $(this).index() ); }); 

但是，不要为每个列表项添加一个点击处理程序，使用如下所示的delegate会更好（性能明智）：

 $("#wizard").delegate('li', 'click', function () { console.log( $(this).index() ); }); 

在jQuery 1.7+，你应该使用。 下面的例子将事件绑定到#wizard元素，像委托事件一样工作：

 $("#wizard").on("click", "li", function() { console.log( $(this).index() ); }); 

Answer 2

就像是：

 $("ul#wizard li").click(function () { var index = $("ul#wizard li").index(this); alert("index is: " + index) }); 

Answer 3

看看这个例子 。

 $("#wizard li").click(function () { alert($(this).index()); // alert index of li relative to ul parent }); 

Answer 4

Delegate和Live很容易使用，但是如果您不再有任何更多的li：sdynamic添加，您可以使用正常的绑定/点击事件分层。 使用这种方法应该会有一些性能上的提升，因为不需要为新的匹配元素监视DOM。 没有任何实际的数字，但它是有道理的:)

 $("#wizard").click(function (e) { var source = $(e.target); if(source.is("li")){ // alert index of li relative to ul parent alert(source.index()); } }); 

你可以在jsFiddle中testing它： http : //jsfiddle.net/jimmysv/4Sfdh/1/