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

【问题标题】：How to get the index of the clicked array element using JavaScript?如何使用 JavaScript 获取单击的数组元素的索引？
【发布时间】：2023-03-18 02:54:01
【问题描述】：

我有一个动态创建的 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>
}

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

【问题讨论】：

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

标签： javascript reactjs react-jsx

【解决方案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> );
}

【讨论】：

this 是绑定点击处理程序的span，因此其父级是div，它是其子级。
我在“this.parentElement”上变得不确定。
您能确认this 是span 元素吗？
我已经添加了数据数组的 sn-p，如上图所示。
还添加了“this”的图片，不包括span元素，包括被包裹的组件。

【解决方案2】：

迭代元素，为每个元素分配一个点击事件侦听器，并使用 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));

【讨论】：

【解决方案3】：

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>

【讨论】：