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

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

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>

Ответ 1

Вот фрагмент кода, который может помочь вам получить индекс элемента, по которому щелкнули, внутри цикла 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: Обновленная скриптовая ссылка

Ответ 2

С разрушением 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

Принятый ответ (от Ashwin Krishnamurthy) на самом деле далек от оптимального.

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

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.

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

Ответ 4

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

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

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

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 :-)

Ответ 5

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

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

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

Ответ 6

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

Ответ 7

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

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

//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, индексный номер элемента, по которому щелкнули.

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

Ответ 8

Если вы создаете макет страницы и контролируете, сколько "subdivs" будет завернуто "контейнером", почему бы не использовать javascript для его динамического создания?

for (var i = 0; i < NumberOfSubDivsYouNeed; i++) { 
 var SubDiv = document.createElement("DIV");
  SubDiv.id = i;
  SubDiv.style.*enter any style rules if you wish*;
  SubDiv.onclick=function(){alert(this.id);};
  document.getElementById("container").appendChild(SubDiv);
  }