2017-02-18 54 views
-1

У меня есть список массивов элементов, динамически созданных. Я хочу получить индекс элемента spaned clicked.Как получить индекс элемента clicked array с помощью 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> 
} 

Однако я не могу получить индекс таким образом, что это лучший способ, чтобы получить индекс кликнутого элемента массива?

enter image description here

enter image description here

+2

Я добавил несколько тегов, дайте мне знать, если они были неуместны. Он не является стандартным javascript, а вместо него является сочетание реакции и jsx. – Tyzoid

+0

Скобки несимметричны. – trincot

+0

Это редукция, реакция, ...? Пожалуйста, отметьте свой вопрос рамкой шаблона, который вы используете. – trincot

ответ

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

'this' - это' span', на котором был обработан обработчик кликов, и, следовательно, его родительский элемент является 'div', из которого он является дочерним. – trincot

+0

Я получаю undefined на «this. ParentElement». – user1234

+0

Не могли бы вы проверить, что 'this' является элементом span? – trincot

0

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>

0

Iterate элементы назначая слушателя событий нажмите на каждый элемент и использовать лямбда кэшировать и передать индекс пользовательской функции обработчика.

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