在Javascript中獲取其父母的索引

Question

這是我的HTML代碼。

<ul class="listClass"> 
    <li>List1</li> 
    <li>List2</li> 
    <li>List3</li> 
    <li>List4</li> 
    <li>List5</li> 
</ul> 

我添加一個onClick事件監聽孩子<li> s，這應該輸出我的孩子<li>

這裏的正確指標是JavaScript的

var lists = document.querySelectorAll('.listClass li'); 
for (var i = 0; i < lists.length; i++) { 
    lists[i].addEventListener('click', function (e) { 
     console.log(e); 
     console.log('My index:', i); 
    }, false); 
} 

它總是輸出：我指數：5

雖然我清楚明白了，它是參照i，有沒有其他方式我可以存儲正確的值i。

我找到了兩種可能的方法。

1st：Jquery的index()方法。 https://api.jquery.com/index/

第2次：DOM事件委託。 What is DOM Event delegation?

有沒有其他方法可以使用？ 謝謝。

Answer 1

您可以將屬性添加到您的元素

var list2 = document.querySelectorAll('.list2 li'); 
 

 
for (var i = 0; i < list2.length; i++) { 
 
    
 
    list2[i].index = i; 
 
    
 
    list2[i].addEventListener('click', function(e) { 
 
    
 
    alert('My index:' + e.target.index); 
 
    
 
    }); 
 
    
 
}

<ul class="list2"> 
 
    <li>Text</li> 
 
    <li>Text</li> 
 
    <li>Text</li> 
 
    <li>Text</li> 
 
    <li>Text</li> 
 
</ul>