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的索引？

例如，当您点击“第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。下面的示例将事件绑定到#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

看看这个example。

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

Answer 4

Delegate和Live很容易使用，但如果你不再动态添加li：s，你也可以使用正常绑定/点击的事件爆发。使用此方法应该会有一些性能提升，因为不必为新的匹配元素监视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上测试它：http://jsfiddle.net/jimmysv/4Sfdh/1/

Answer 5

另一种方式

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

演示 https://jsfiddle.net/m9xge3f5/

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

5 个答案: