Как по наведению на элемент узнать его номер как дочернего элемента?

Question

[webquestions]

Как по наведению на элемент узнать его номер как дочернего элемента?
ul
>li
>li
>li:hover (выдает что это 3 элемент)

Answer 1

[Stalker_RED]

function getIndex(el){
  var index = 0;
  while (el = el.previousElementSibling) {
    index++;
  }
  return index;
}

Демо: https://jsfiddle.net/m813ozb1/

P.S.: Да, и в этом случае отсчет идет с нуля, как и в массивах и при определении jQuery. Но если вам нужно с единицы, вы можете изменить стартовое значение счетчика.

UPD: 2023
Сейчас уже смело можно использовать синтаксис из ES6/ES2015

const getIndex = el => [...el.parentNode.children].indexOf(el);

Comments

[Даниил Игоревич]

Можете объяснить, как это работает? С таким синтаксисом я пока на Вы. Если я правильно понял, то с элемента, на который навели мышью, браузер идёт вверх до контейнера и увеличивает при этом index? Не проще было бы навесить data-number=n на каждый li до запуска обработчика события? Так браузер будет всего лишь брать значение, а не каждый раз обходить весь контейнер.

[Stalker_RED]

Даниил Ораин: Да, с элемента на котором сработало событие идет перебор previousElementSibling до тех пор пока они есть.
Вы конечно можете проиндексировать все элементы, и где-то сохранить этот индекс. Правда я не могу сходу придумать ситуацию, в которой это пригодилось бы. Разве что в какой-то браузерной игре, где эти действия происходят очень часто?

Answer 2

[Dmitriy Mozgovoy]

function getNodeIndex(node){
   return node && node.parentNode && [].indexOf.call(node.parentNode.children, node);
}

var log=document.getElementById("log");
document.body.addEventListener("mouseover",function(event){
  log.innerHTML="Node index="+getNodeIndex(event.target);
})

https://jsfiddle.net/DigitalBrain/u5oqo9rf/

Answer 3

[Андрей Федоров]

Наверно не очень подходящее вам решение... Однако я бы не стал считать дочерние элементы на js (это сложно), а присвоил бы каждому li атрибут, что-то типа data-number="3" и обращался бы к нему из js. На крайний случай можно этот номер даже в alt запихнуть...

Comments

[Даниил Игоревич]

Задача усложнится, если таких li штук 1000, хотя есть вариант динамически присвоить этот атрибут.