indexOf 不适用于 JavaScript 中的列表

Question

我正在尝试获取已放入列表中的跨度元素的索引。所以我创建了包含所有元素的列表，但是当我尝试通过单击其中一个元素来获取元素的索引时，我遇到了错误 "indexOf is not a function"。我该怎么做才能解决这个问题并获得预期的输出？

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

The getElementsByClassName() method of Document interface returns an array-like object of all child elements which have all of the given class names.

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

试试 Spread syntax:

[...mdr].indexOf(this)

或：与Array.from()

The Array.from() method creates a new, shallow-copied Array instance from an array-like or iterable object.

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 中的列表

indexOf doesn't work with my list in JavaScript

javascript

arrays

indexof