Question

我正在尝试获取放置在列表中的span元素的索引。因此，我创建了包含所有元素的列表，但是当我尝试通过单击元素之一来获取元素的索引时，出现错误“ indexOf不是函数”。我该怎么做才能解决此问题并获得预期的输出？

var mdr;
window.onload = function() {
  mdr = document.getElementsByClassName("lol");
  for (let i = 0; i < mdr.length; i++) {
    mdr[i].addEventListener("click", haha);
  };
};

function haha() {
  console.log(mdr.indexOf(this));
};

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

div {
  height: 50px;
  width: 100px;
  background: grey;
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

<div class="lol">1</div>
<div class="lol">2</div>
<div class="lol">3</div>
<div class="lol">4</div>
<div class="lol">5</div>

Answer 1

Document接口的getElementsByClassName()方法返回具有所有给定类名的所有子元素的 类似数组 对象。

由于getElementsByClassName()返回的结果不是数组indexOf()在结果集上不可用。

尝试使用Spread syntax：

[...mdr].indexOf(this)

或：使用Array.from()

Array.from()方法从类似数组或可迭代的对象中创建一个新的浅复制Array实例。

Array.from(mdr).indexOf(this)

var mdr;
window.onload = function() {
   mdr = document.getElementsByClassName("lol");
   for (let i = 0; i < mdr.length; i++) {
       mdr[i].addEventListener("click", haha);
   };
};

function haha() {
   console.log(Array.from(mdr).indexOf(this));
};

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
div {
  height: 50px;
  width: 100px;
  background: grey;
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

<div class="lol">1</div>
<div class="lol">2</div>
<div class="lol">3</div>
<div class="lol">4</div>
<div class="lol">5</div>

indexOf不适用于JavaScript中的列表

1 个答案: