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

假设我有这样的标记：

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

单击该

li

时，如何获取子

li

相对于其父级的索引

例如，当您单击“步骤1”时，将弹出一个带有“0”的

警报

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

但是，与其为每个列表项附加一个单击处理程序，不如使用如下所示的处理程序（性能方面）：

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

在jQuery1.7+中，应该使用。下面的示例将事件绑定到
#wizard
元素，就像委托事件一样工作：

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

Delegate和Live很容易使用，但是如果您不需要动态添加更多的li:s，那么您也可以将事件delagation与普通绑定/单击一起使用。使用这种方法应该会有一些性能提升，因为DOM不必监视新的匹配元素。没有任何实际数字，但这很有意义：）

您可以在jsFiddle上测试它：
类似于：

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

看看这个

另一种方式

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

演示
如果您不想的话，不需要像jQuery这样的大型库来实现这一点。要通过内置DOM操作实现这一点，请获取数组中
li
同级元素的集合，然后单击，检查该数组中单击元素的
indexOf


const lis=[…document.queryselectoral（'#wizard>li'）；
lis.forEach（（li）=>{
li.addEventListener（'click'，（）=>{
常数指数=li.indexOf（li）；
控制台日志（索引）；
});
});

第一步
步骤2
hi redsquare。。我在练习jQuery，我有点不知道委托：D。。为什么委托比直接在元素上附加事件更好？@steweb-Hey-因为一个事件处理程序比可能的多个事件处理程序更可取。如果您有大的列表，那么将事件附加到dom可能会很昂贵，因此作为一项规则，我尝试在可能的情况下使用上述方法，而不是在每个元素上使用单独的处理程序。一篇更深入的文章是——也是谷歌的“javascript事件委派”好的，因此，以这种方式管理事件比经典的“dom附件”更轻松：）…谢谢@steweb——它也更轻，因为jquery不需要对所有li元素进行初始查找。它只是查看容器并在该级别侦听，以查看单击的对象是否是li。这个.index方法对我非常有用。我使用jQuerySortable进行排序，但它将语义排名信息存储在DOM中。使用.index（），我可以非常干净地将排名从dom中拉回来。谢谢当你说“不必监视DOM”时，你指的是什么？jq委托不监视dom。@redsquare我的印象是委托只是Live的一个更高效的变体。这来自：“根据一组特定的根元素，现在或将来为与选择器匹配的所有元素的一个或多个事件附加一个处理程序。”将来绑定时必须进行监视？不，它只是像上面的代码一样在容器上使用委派。如果在容器中插入新的li元素，则容器单击事件仍会触发，并且一切仍正常。不需要监视。@是的，您是正确的。即使在加载DOM后添加了新元素，我的解决方案仍然有效。由于委托在内部使用Live（请参阅），因此仍然感觉这样做更优化，但更不方便。但正如我所说，我没有数字。很好的补充-我们可以找到相对于父选择器的索引+1请参考此答案，因为它实际上回答了问题，而不是示例$（…）的可能解决方案。indexOf不是一个函数。我的答案中的任何代码段都不会产生该错误-您可以按“Run code snippet”查看它们的工作情况。如果您遇到了这个错误，那么您使用的是不同的代码——听起来像是在使用jQuery，但我的答案是展示如何在没有足够的jQueryFair的情况下完成这类事情。是的，我正在使用JQuery。谢谢
$("ul#wizard li").click(function () {
  var index = $("ul#wizard li").index(this);
  alert("index is: " + index)
});

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

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