我将此 forEach 代码转换为 for 循环，但代码不起作用

Question

单击红色退出按钮会将播放器从 forEach 代码中删除，但不会从 for 循环中删除。

单击蓝色按钮，然后单击红色退出按钮以删除播放器。

如何让 for 循环代码与 forEach 代码一样工作？

此代码正在运行。

https://jsfiddle.net/n1t3kjdw/

  function removePlayerHandler(evt) {
    const el = evt.target;
    const container = el.closest(".container");
    const wrapper = container.querySelectorAll(".wrap");
    wrapper.forEach(function(wrapper) {
      if (wrapper.player) {
        return removePlayer(wrapper);
      }
    });
  }

我在这里做错了什么？ https://jsfiddle.net/rbwsL8hf/

为什么这段代码不起作用，需要修复什么？

  function removePlayerHandler(evt) {
const el = evt.target;
const container = el.closest(".container");
const wrappers = container.querySelectorAll(".wrap"); {
  for (let i = 0; i < wrappers[i].length; i++) {
    if (wrappers[i].player) {
      return removePlayer(wrappers[i]);
    }
  }
}
}

Answer 1

在您更改的代码中，您对wrappers[i].length 进行了迭代条件检查，而不是我认为的wrappers.length。否则，您将在每次迭代时检查 i 是否小于第 i 个包装器的长度，该长度可能已定义或未定义。

  function removePlayerHandler(evt) {
const el = evt.target;
const container = el.closest(".container");
const wrappers = container.querySelectorAll(".wrap"); {
  for (let i = 0; i < wrappers[i].length; i++) { // HERE
    if (wrappers[i].player) {
      return removePlayer(wrappers[i]);
    }
  }
}
}

Answer 2

作为@Salim 答案的补充，您的代码中还有一个额外的括号，试试这个：

function removePlayerHandler(evt) {
   const el = evt.target;
   const container = el.closest(".container");
   const wrappers = container.querySelectorAll(".wrap");
     for (let i = 0; i < wrappers.length; i++) {
       if (wrappers[i].player) {
         return removePlayer(wrappers[i]);
        }
     }
}