javascript - 获取事件目标的父元素的索引

Question

提供此代码:

$("#myList").on("click", "span", function (event) {
    alert($(this).index());
});

和 HTML:

<ul id="myList">
    <li>item 0 <span>span 0</span></li>
    <li>item 1 <span>span 1</span></li>
    <li>item 2 <span>span 2</span></li>
    <li>item 3 <span>span 3</span></li>
</ul>

如果您单击任何 <span>元素，“0”将始终被提醒。我认为这是因为只有一个 <span>在每个 <li> 内, 所以它总是被赋予 0 的索引。

我想让它做的是返回 <span> 的索引的父级 - 在这种情况下，它将是父级的索引 <li>在 <ul id="myList"> 内. 例如，点击 <span>span 2</span>将提醒“2”。

JSFiddle

Answer 1

要么使用$(this).parent().index()或 $(this).closest('li').index() .

即使您决定将新元素放入 span 并将事件绑定(bind)到该元素，后者也会提醒 li 的索引。