Узнать индекс элемента при наведении

Question

Вот HTML

<div class="info_table">
    <div class="table_row">
        <div class="cell">
            <p>Price</p>
        </div>
        <div class="cell">
            <p class="red_p">$49</p>
        </div>
    </div>
    <div class="table_row">
        <div class="cell">
            <p>Tracked Keywords</p>
        </div>
        <div class="cell">
            <p>500</p>
        </div>
    </div>
</div>

Нужно узнать индекс ".cell" при наведении на него курсора относительно родителя ".table_row" , а не ".info_table". Как это сделать?

Answer 1

// перебираем все эл-ты с классом cell
document.querySelectorAll('.cell').forEach((e) => {
  // на каждый вешаем событие mouseover
    e.addEventListener('mouseover', evt => {
    // записываем эл-т с события в переменную
    let el = evt.target;
    // проверяем, есть ли эл-та класс cell,
    if ( !evt.target.classList.contains('.cell') ) {
      // если его нет - записываем в переменную 
      // ближайший (по node tree) эл-т с классом cell
        el = evt.target.closest('.cell');
    }
    // [...el.parentNode.children]:
    // el.parentNode.children - получаем список всех
    // "детей" для родителя блока с классом cell 
    // [...el.parentNode.children] - "превращаем" 
    // список эл-тов в массив
    // .indexOf(el) - смотрим в массиве индекс 
    // текущего эл-та
    let index = [...el.parentNode.children].indexOf(el);
    // выводим индекс в консоль
    console.log(index);
  });
});

<div class="info_table">
    <div class="table_row">
        <div class="cell">
            <p>Price</p>
        </div>
        <div class="cell">
            <p class="red_p">$49</p>
        </div>
    </div>
    <div class="table_row">
        <div class="cell">
            <p>Tracked Keywords</p>
        </div>
        <div class="cell">
            <p>500</p>
        </div>
    </div>
</div>

Answer 2

Если использовать jQuery, то задача решается довольно просто - index() в помощь:

$('.info_table').on('mouseover', '.cell', function() {
  console.log( $(this).index() );
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="info_table">
  <div class="table_row">
    <div class="cell">
      <p>Price</p>
    </div>
    <div class="cell">
      <p class="red_p">$49</p>
    </div>
  </div>
  <div class="table_row">
    <div class="cell">
      <p>Tracked Keywords</p>
    </div>
    <div class="cell">
      <p>500</p>
    </div>
  </div>
</div>

Почти то же, но на JS:

document.querySelector('.info_table').addEventListener('mouseover', (ev) => {
  if (target = ev.target.closest('.cell')) {
    console.log( [...target.parentNode.children].indexOf(target) );
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="info_table">
  <div class="table_row">
    <div class="cell">
      <p>Price</p>
    </div>
    <div class="cell">
      <p class="red_p">$49</p>
    </div>
  </div>
  <div class="table_row">
    <div class="cell">
      <p>Tracked Keywords</p>
    </div>
    <div class="cell">
      <p>500</p>
    </div>
  </div>
</div>

Answer 3

Пример выше, без стрелочной функции в обработчике, выглядит более лаконично.

document.querySelectorAll('.cell').forEach((el) => {
    el.addEventListener('mouseover', function() {    
      let index = [...this.parentNode.children].indexOf(this);

      console.log(index);
  });
});

<div class="info_table">
    <div class="table_row">
        <div class="cell">
            <p>Price</p>
        </div>
        <div class="cell">
            <p class="red_p">$49</p>
        </div>
    </div>
    <div class="table_row">
        <div class="cell">
            <p>Tracked Keywords</p>
        </div>
        <div class="cell">
            <p>500</p>
        </div>
    </div>
</div>

БЛОГ НА HUSL

Узнать индекс элемента при наведении

Ответы (3 шт):