主页 / 问题 / 1280485
Accepted
Denis
Asked:2022-05-11 04:56:31 +0000 UTC2022-05-11 04:56:31 +0000 UTC

获取悬停时元素的索引

  • 772

这是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>

将鼠标悬停在相对于父级“.table_row”而不是“.info_table”上时，您需要知道“.cell”的索引。怎么做？

javascript

3 个回答

  1. Best Answer

    如果您使用 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>

    • 3 

  2. // перебираем все эл-ты с классом 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>

    • 2

  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>

    • 0

相关问题