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

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>元素，＆＃34; 0＆＃34;将始终收到提醒。我认为这是因为每个<span>中只有一个<li>，因此它的索引始终为0.

我想要它做的是返回<span>父级的索引 - 在这种情况下，它将是<li>中父级<ul id="myList">的索引}。 例如，点击<span>span 2</span>会提醒＆＃34; 2＆＃34;。

JSFiddle

Answer 1

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

后者会提醒li的索引，即使你决定在你的跨度中放入一个新元素并将事件绑定到那个。

Answer 2

做到这一点：

alert($(this).parent().index());

Answer 3

使用$.fn.parent方法：

＆＃13;

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 4

检查fiddle

JS：

alert($(this).parent().index());

Answer 5

USE parent()。

console.log($(this).parent().index());

查看jQuery DOCS

Answer 6

这是一个可能的解决方案：https://jsfiddle.net/9naxotz1/2/

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