indexOf 不适用于我在 JavaScript 中的列表 [重复]答案

【问题标题】：indexOf doesn't work with my list in JavaScript [duplicate]indexOf 不适用于我在 JavaScript 中的列表 [重复]
【发布时间】：2019-11-16 17:03:13
【问题描述】：

我正在尝试获取已放入列表的 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>

【问题讨论】：

mdr 不是数组。使用Arrayf.from(mdr).indexOf。

标签： javascript arrays indexof

【解决方案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>

【讨论】：