JavaScriptを使用してクリックされた配列要素のインデックスを取得する方法は？

Question

私は動的に作成されたスパン要素の配列リストを持っています。私は、クリックされたスパン要素のインデックスを取得したい。

私はこの方法でインデックスを取得できませんが、クリックした配列要素のインデックスを取得する最良の方法は何ですか？

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

各要素にclickイベントリスナーを割り当てる要素を反復処理し、カスタムハンドラ関数にインデックスをキャッシュし、合格するためにラムダを使用しています。

// 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));