如何使用JavaScript获取被点击的数组元素的索引？

Question

我有一个动态创建的跨度元素数组列表。我想获取点击的跨度元素的索引。

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

如何使用JavaScript获取被点击的数组元素的索引？

How to get the index of the clicked array element using JavaScript?

javascript

reactjs

react-jsx