Как получить индекс элемента html?

Question

[ForSureN1]

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

function adverTabs() {
  let btn = document.querySelectorAll('.advertisement-tabs__item');  //Кнопки табой
  let block = document.querySelectorAll('.advertisement-tabs__content') //Контент
  btn.forEach(key => {
    key.addEventListener('click', function() {
      console.dir(key)
      block.forEach(item => {
        item.classList.toggle('active', key === item)
      })
    })
  })
}

Answer 1

[Сергей delphinpro]

btn.forEach((key, index) => {
})

upd
Названия переменных у вас плохие.

// Это коллекции - множественная форма
let buttons = document.querySelectorAll('.advertisement-tabs__item');  //Кнопки табой
let blocks = document.querySelectorAll('.advertisement-tabs__content') //Контент

// Что еще за key? Там кнопка
buttons.forEach((btn, index) => {
    btn.addEventListener('click', function() {
      console.dir(btn)
      blocks.forEach(block => {
        block.classList.toggle('active', btn === block)
      })
    })
  })

Comments

[ForSureN1]

Как же легко оказалось решение, но я не могу понять, как это работает. Если вас не затрудняет объясните пожалуйста. Index это зарезервированная функция ? Или просто в качестве аргументов на втором месте стоит (индекс) элемента ?

[Сергей delphinpro]

ForSureN1, Посмотрите в документацию =) Там все написано

Сигнатура метода:

arr.forEach(function callback(currentValue, index, array) {
    //your iterator
}[, thisArg]);

Функция callback будет вызвана с тремя аргументами:

значение элемента (value)
индекс элемента (index)
массив, по которому осуществляется проход (array)

https://developer.mozilla.org/ru/docs/Web/JavaScri...

[ForSureN1]

Сергей delphinpro, Ааааа, спасибо большое :)