Получить индекс по нажатому элементу, используя чистый JavaScript - PullRequest
Новая
       1

Получить индекс по нажатому элементу, используя чистый JavaScript

19 голосов
/ 10 января 2012

Мне нужно знать индекс нажатого элемента. Не могу понять, как это сделать 

for (i = 0; i < document.getElementById('my_div').children.length; i++) {
    document.getElementById('my_div').children[i].onclick = function(){'ALERT POSITION OF CLICKED CHILD'};
}

this.index

вот пример того, что я пытаюсь сделать (он возвращает только 6): 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{margin:0;}
#container div{height:50px;line-height:50px; text-align:center}
</style>
</head>
<body>
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<script>
for (i = 0; i < document.getElementById('container').children.length; i++) {
    document.getElementById('container').children[i].onclick = function(){alert('Number ' + i + ' was clicked')};
}
</script>
</body>
</html>

Ответы [ 7 ]

37 голосов
/ 10 января 2012

Вот код кода , который может помочь вам получить индекс элемента, по которому щелкнули, внутри цикла for. Все, что вам нужно, это новый объем : 

var g = document.getElementById('my_div');
for (var i = 0, len = g.children.length; i < len; i++)
{

    (function(index){
        g.children[i].onclick = function(){
              alert(index)  ;
        }    
    })(i);

}

Редактировать 1: Включение комментариев пользователя Феликса Клинга в ответ.

Обработчик событий уже является закрытием

Редактировать 2: Обновлена ​​скриптовая ссылка

29 голосов
/ 20 сентября 2017

С ES6 вы можете сделать 

const index = [...el.parentElement.children].indexOf(el)

или 

const index = Array.from(el.parentElement.children).indexOf(el)

или версию ES5 

var index = Array.prototype.slice.call(el.parentElement.children).indexOf(el)
3 голосов
/ 08 февраля 2018

Принятый ответ (от Ашвина Кришнамурти) на самом деле далек от оптимального.

Вы можете просто сделать: 

const g = document.getElementById('my_div');
for (let i = 0, len = g.children.length; i < len; i++)
{
    g.children[i].onclick = function(){
        alert(index)  ;
    }
}

, чтобы избежать создания ненужных замыканий. И даже в этом случае это не оптимально, поскольку вы создаете 6 обработчиков событий DOM (6 divs в приведенном выше примере), чтобы получить число нажатых одним щелчком div.

На самом деле вы должны использовать делегирование события (прикрепить одиночное событие клика к родительскому элементу), а затем проверить индекс e.target, используя метод, который я упоминал ранее и выше ( Получить индекс по нажатому элементу, используя чистый JavaScript ).

2 голосов
/ 10 января 2012

Элементы ячейки таблицы имеют свойство cellIndex, но я не знаю о других элементах. Вам либо придется

  • создать замыкание, чтобы зарезервировать значение i
  • динамически считать previousSibling с
  • добавьте свойство index в цикл for и прочитайте его (не увеличивайте хост-объекты).

Подход к закрытию будет самым простым, я думаю. Пожалуйста, убедитесь, что вы поняли, как работают замыкания, в Интернете есть хорошие объяснения. 

function makeAlertNumber(element, i) {
    element.addEventListener('click', function() {
       alert('Number ' + i + ' was clicked');
    }, false);
}
[].slice.call(document.getElementById('container').children).forEach(makeAlertNumber); // homework: find a way to express this for older browsers :-)
1 голос
/ 18 июня 2019

У меня была та же проблема, когда мне нужно было перебрать массив и получить индексный номер элемента, по которому щелкнули.

Вот как я решил проблему ... 

//first store array in a variable
let container = [...document.getElementById('container')];

//loop through array with forEach function
container.forEach(item => {
    item.addEventListener('click', () => {
        console.log(container.indexOf(item));
    });
});

Это будет console.log, индексный номер элемента, по которому щелкнули.

Надеюсь, что это ответит на некоторые вопросы.

1 голос
/ 10 января 2012

Индекс по отношению к чему?

Если речь идет об индексе в текущей коллекции HTML, индекс будет просто представлен вашей переменной счетчика i.

Одно словопредостережения: поскольку HTMLCollections являются «живыми», вы должны когда-либо использовать их для определения .length в цикле.Если случится так, что эти элементы будут добавлены или удалены внутри цикла, могут произойти странные и опасные вещи.Вместо этого кешируйте значение .length перед вызовом цикла.

0 голосов
/ 10 октября 2016

getIndexOfNode: function(node){ var i = 1; while(node.previousElementSibling != null){ i++ } return i; }
функция вернет индекс узла, переданного в родительский элемент.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...