Задать вопрос
@Pavel_Proca

Как получить индекс элемента, который вызвал функцию?

Есть неограниченное количество элементов в HTML. К примеру, кнопок. Каждая из них вызывает одну и ту же функцию.
<button onClick="somefunc(this)">Button 1</button>
<button onClick="somefunc(this)">Button 2</button>
<button onClick="somefunc(this)">Button 3</button>
<button onClick="somefunc(this)">Button N</button>

Как сделать так, что бы функция вернула порядковый номер вызывающего элемента из списка всех остальных элементов?
То есть, мне нужно узнать его номер, что бы я мог обратиться к нему с помощью document.getElementsByTagName('button')[Тут по сути должен быть его номер, который я и хочу узнать]
  • Вопрос задан
  • 202 просмотра
Подписаться 1 Оценить 2 комментария
Решения вопроса 1
Hyubert
@Hyubert
JS
Не нужно так
лучше делегировать собитие

<div id="parent">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
    <button>Button N</button>
</div>
document.getElementById('parent').addEventListener('click', function (e) {
  console.log(e.target);
})
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
iIIuminate
@iIIuminate
Full stack web developer
если эти элементы обернуты в какой-то элемент то можешь через index в jQuery сделать
Ответ написан
Комментировать
@emp1re
Если без всплытия то вот такой кастыльчик можно сделать -
<button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <button>Button N</button>

var button = document.querySelectorAll('button');
for(var i=0; i < button.length; i++){
		lisener(i);
}
function lisener(i){
	   button[i].addEventListener('click', () => {
	    console.log(i);
  })
}


<div>
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <button>Button N</button>
  </div>



var div = document.querySelector('div');
div.addEventListener('click', (e) => {
     console.log(e.target)
  })
Ответ написан
Комментировать
Graff46
@Graff46
Программист любитель
somefunc() {
   var num_of_button =  $(this).index();
};
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы