獲取事件的父元素的索引對象

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」始終提醒。我想這是因爲只有每個<li>內的一個<span>，所以它總是會給出0

我希望它做什麼指標，就是返回<span>的父的指標 - 在這種情況下， ，它將成爲<ul id="myList">之內的家長<li>的索引。 例如，點擊<span>span 2</span>將提醒「2」。

JSFiddle

Answer 1

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

即使您決定將新元素放入跨度並將事件綁定到該元素，後者也會警告li的索引。

Answer 2

做到這一點：

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

Answer 3

使用$.fn.parent方法：

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

<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>

Answer 4

檢查fiddle

JS：

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

Answer 5

使用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()); 
});