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

-1

我有一个动态创建的span元素的数组列表。我想获得点击的span元素的索引。如何使用JavaScript获取点击数组元素的索引？

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

但是我无法通过这种方式获得索引，得到点击数组元素索引的最佳方法是什么？

来源

2017-02-18 user1234

我已经添加了一些标签，让我知道，如果他们都不合适。它似乎不是标准的JavaScript，而是反应和jsx的混合。 – Tyzoid

括号不平衡。 – trincot

这是减少，反应，...？请使用您正在使用的模板框架标记您的问题。 – trincot

你可以传递数据数组的当前长度为索引你的函数：

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

来源

2017-02-18 21:11:01 trincot

'这是'span'，点击处理程序被绑定，因此它的父母是它的'div'它是一个孩子。 – trincot

我收到“this。parentElement”的未定义。 – user1234

你能证实'this'是span元素吗？ – trincot

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>

来源

2017-02-18 21:11:30

迭代分配一个点击事件监听到每个元件和使用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));

来源

2017-02-18 21:42:42

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

回答

相关问题