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

我有一个动态创建的跨度元素数组列表。我想获取单击的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>
}

boundItemClick（e）{
console.log（e.target）//结果一些标签
}
render（）{
var数据=[]；
数据推送(
{textLabel}onClick={this.boundItemClick.bind（this）}
}

但是，我无法通过这种方式获取索引，获取已单击数组元素的索引的最佳方式是什么

---

您可以将数据数组的当前长度作为索引传递给函数：

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

boundItemClick（idx，e）{//添加idx作为参数
console.log（idx）；
}
render（）{
var数据=[]；
数据推送(
{textLabel}onClick={this.boundItemClick.bind（this，data.length）}
);
}

纯JS

解决方案

注意：它从1开始计数，但如果需要，可以将其调整为从0开始计数索引

var span=document.getElementsByTagName（'span'）；
[…span].forEach（（v，i）=>v.addEventListener（'click'，function（）{
控制台日志（i+1）；
}))；

1
二
三个

迭代元素，为每个元素分配一个单击事件侦听器，并使用lambda缓存索引并将其传递给自定义处理程序函数

//初始化动态创建的元素数组
常量元素=[]；
//动态模拟元素的创建
const mkButton=text=>Object.assign（document.createElement（'button'），{textContent:text}）
对于（var i=10；i-->0；）元素，按下（document.body.appendChild（mkButton（'click'））；
//自定义处理函数
const handler=index=>console.log（index）；
//将具有缓存索引的侦听器分配给每个元素
elements.forEach（（e，i）=>e.addEventListener（'click'，event=>handler（i），false））

我添加了一些标记，如果它们不合适，请告诉我。它似乎不是标准的javascript，而是react和jsx的混合。括号是不平衡的。这是redux，react，…？请用您正在使用的模板框架标记您的问题。是的，忘了包括标记，它包括react jsx模板。。。

this

是绑定单击处理程序的

span

，因此它的父级是它的子级的

div

。我在“this.parentElement”上没有定义。你能验证

this

是span元素吗？我已经添加了一个数据数组片段，如上图所示。还添加了一个“this”的图像，nope不包括span元素，包括已包装的组件。