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

javascript jquery

2022-08-30 01:59:49

假设我有这个标记：

<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
});

单击时，如何获取子项相对于其父项的索引？lili

例如，当您单击“步骤1”时，应弹出带有“0”的。alert

答案 1

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

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

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

在 jQuery 1.7+ 中，您应该使用 on。下面的示例将事件绑定到元素，其工作方式类似于委托事件：#wizard

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

答案 2

像这样：

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