如何使用JavaScript獲取點擊數組元素的索引？

Question

我有一個動態創建的span元素的數組列表。我想獲得點擊的span元素的索引。

boundItemClick(e) { 
    console.log(e.target) //results <span>some label</span> 
} 
render() { 
    var data=[]; 
    data.push (<div> 
     <span>{textLabel} onClick={this.boundItemClick.bind(this)}</span> 
     </div> 
} 

但是我無法通過這種方式獲得索引，得​​到點擊數組元素索引的最佳方法是什麼？

Answer 1

你可以傳遞數據數組的當前長度爲索引你的函數：

boundItemClick(idx, e) { // add idx as argument 
    console.log(idx); 
} 
render() { 
    var data=[]; 
    data.push (<div> 
     <span>{textLabel} onClick={this.boundItemClick.bind(this, data.length)}</span> 
     </div>); 
} 

Answer 2

Pure JS解決方案。

注意：從1計數，但如果你願意，你可以調整它從0

var spans = document.getElementsByTagName('span'); 
 
[...spans].forEach((v,i) => v.addEventListener('click', function() { 
 
    console.log(i+1); 
 
}));

<span>one</span> 
 
<span>two</span> 
 
<span>three</span>

jQuery解算指標。

$('span').click(function(){ 
 
    console.log($(this).index()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<span>one</span> 
 
<span>two</span> 
 
<span>three</span>

Answer 3

迭代分配一個點擊事件監聽到每個元件和使用lambda到高速緩存和索引傳遞給定製處理函數的元素。

// Initialize our dynamically created elements array 
 
const elements = []; 
 

 
// Simulate the creation of elements dynamically 
 
const mkButton = text => Object.assign(document.createElement('button'), { textContent: text }) 
 
for(var i = 10; i-- > 0;) elements.push(document.body.appendChild(mkButton('click'))); 
 

 
// Custom handler function 
 
const handler = index => console.log(index); 
 

 
// Assign the listener with the cached index to each element 
 
elements.forEach((e, i) => e.addEventListener('click', event => handler(i), false));