javascript - 获取div的索引

Question

如何使用 vanilla JS 获取我单击的 div 的索引。是否有类似 indexOf() 或 .selectedIndex 的方法或属性？

function test() {
  var div = document.getElementsByTagName('div');
}

div.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

div:hover {
  cursor: pointer;
}

<div class="flex">

  <div onclick="test()"><img src="http://via.placeholder.com/100x100" alt=""></div>
  <div onclick="test()"><img src="http://via.placeholder.com/100x100" alt=""></div>
  <div onclick="test()"><img src="http://via.placeholder.com/100x100" alt=""></div>
  <div onclick="test()"><img src="http://via.placeholder.com/100x100" alt=""></div>

</div>

标签： javascript

Answer 1

您需要将 div 作为参数传递，然后使用parent.indexOf(child)：

function test(el) {
  var divs = document.querySelectorAll(".flex div");
  var index = Array.from(divs).indexOf(el);
  console.log(index);
}

div.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

div:hover {
  cursor: pointer;
}

<div class="flex">
  <div onclick="test(this)"><img src="http://via.placeholder.com/100x100" alt=""></div>
  <div onclick="test(this)"><img src="http://via.placeholder.com/100x100" alt=""></div>
  <div onclick="test(this)"><img src="http://via.placeholder.com/100x100" alt=""></div>
  <div onclick="test(this)"><img src="http://via.placeholder.com/100x100" alt=""></div>
</div>