найти индекс элемента в JavaScript

Question

Я перехватываю все элементы по имени класса и создаю прослушиватель для каждого из них следующим образом:

const subnavs = document.getElementsByClassName('subnav') 
for ( let i =0 ; i <subnavs.length ; i++ ) {
   subnavs[i].addEventListener('mouseover', function() {
   purpleDiv.style.marginTop =  rect.height + 'px'
}) 

Когда вызывается событие мыши, как получить индекс, по которому щелкнули субнап? Это в Wordpress, поэтому у меня нет простого способа добавить идентификатор к каждому subnav, что бы сработало.

Answer 1

Если вы хотите, чтобы индекс просто использовал i в вашем обратном вызове:

   subnavs[i].addEventListener('mouseover', function() {
       purpleDiv.style.marginTop =  rect.height + 'px'
       console.log("INDEX: ", i)
   }) 

Если вы пытаетесь использовать индекс для доступа к элементу позже, я бы порекомендовал следующее:

Когда вызывается ваш обратный вызов в слушателе событий, ему передается MouseEvent

Так что если вы измените function() { на function(event) {, вы можете получитьконкретный элемент, на который накладывается event.target, который является элементом, который вызвал событие mouseover.

   subnavs[i].addEventListener('mouseover', function(event) {
       purpleDiv.style.marginTop =  rect.height + 'px'
       console.log("ELEMENT: ", event.target)
   }) 

Answer 2

Вы можете использовать объект:

const subnavs = document.getElementsByClassName('subnav') 
for ( let i =0 ; i <subnavs.length ; i++ ) {
   subnavs[i].addEventListener('mouseover', function(e) {
   /*** Now you can use 'e' to reference the nav triggering the listener **/
   e.style.marginTop =  rect.height + 'px'
   ***/
   purpleDiv.style.marginTop =  rect.height + 'px'
})