JavaScript foreach 失败 [重复]答案

【问题标题】：JavaScript foreach failed [duplicate]JavaScript foreach 失败 [重复]
【发布时间】：2021-01-09 08:24:02
【问题描述】：

我有一个 JS foreach 函数，如下所示：

编辑：我的最小可重现示例

var liArray = document.getElementsByClassName("listItem");
liArray.forEach(function(item) {
  if (item.getAttribute("data-code").substring(0, 2) == 15) {
    console.log("success");
  }
});

<ul>
  <li class="item>
    <div data-code="151" class="listItem">example</div>
  </li>
  <li class="item>
    <div data-code="152" class="listItem">example</div>
  </li>
  <li class="item>
    <div data-code="153" class="listItem">example</div>
  </li>
  <li class="item>
    <div data-code="154" class="listItem">example</div>
  </li>
  <li class="item>
    <div data-code="155" class="listItem">example</div>
  </li>
  <li class="item>
    <div data-code="156" class="listItem">example</div>
  </li>
</ul>

比我在控制台中获得的success 的次数150 次。但是当我将console.log 更改为item.className = "disabled" 时。喜欢：

liArray.forEach(function(item) {
  if (item.getAttribute("data-code").substring(0, 2) == 15) {
    item.className = 'disabled';
  }
});

事实证明，只有一半 (75) 的项目具有 disabled 类。

我不知道我的代码出了什么问题。
希望有人能帮忙，谢谢！

【问题讨论】：

请提供minimal reproducible example。
请显示更多上下文。以下是最有可能的两种可能性： 1. 您正在运行此功能两次； 2.你的liArray有重复。
仅供参考：如果您有data-* 属性，您可以使用dataset 属性。例如：item.dataset.code 与您的item.getAttribute("data-code") 相同。
@FelixKling 对不起，我已经添加了有关此问题的更多详细信息。
@Reyno 感谢您的信息！这里的data-code是自定义数据，所以这个方法不行。

标签： javascript foreach

【解决方案1】：

当你定义一个新的类名时，现有的项目会从改变数组的集合中删除。这会导致循环中的“混乱”。

const foos = document.getElementsByClassName('foo');

Array.from(foos).forEach((foo, i) => {
  foo.className = 'bar';
  console.log(`Array length: ${foos.length}, current index: ${i}`);
});

<ul>
<li class='foo'>Foo 1</li>
<li class='foo'>Foo 2</li>
<li class='foo'>Foo 3</li>
<li class='foo'>Foo 4</li>
<li class='foo'>Foo 5</li>
</ul>

因此，您应该添加一个新类，而不是将现有类替换为： item.classList.add('disabled');

const foos = document.getElementsByClassName('foo');

Array.from(foos).forEach((foo, i) => {
  foo.classList.add('bar');
  console.log(`Array length: ${foos.length}, current index: ${i}`);
});

<ul>
<li class='foo'>Foo 1</li>
<li class='foo'>Foo 2</li>
<li class='foo'>Foo 3</li>
<li class='foo'>Foo 4</li>
<li class='foo'>Foo 5</li>
</ul>

【讨论】：

然而，OP 可以做你正在做的事情并使用Array.from(foos).forEach(...)。 foos 将更改，但不会更改您调用 forEach 的数组。

【解决方案2】：

getElementsByClassName 返回一个HTMLCollection，它没有forEach。

使用普通的for循环：

var list = document.getElementsByClassName("events");
for (let item of list) {
    console.log(item.id);
}

【讨论】：

感谢您为我解释 HTMLCollection！就我而言，问题似乎直接在于更改className，这会导致循环混乱，就像 Samuli 提到的那样。不过还是谢谢你分享你的见解:)