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

Question

假设我有这个标记:

<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 相对于其父级的索引？

例如，当你点击“Step 1”时，应该会弹出一个带有“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+ 中，您应该使用 on .下面的示例将事件绑定(bind)到 #wizard 元素，就像委托(delegate)事件一样工作:

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