Javascript 数组forEach跳过奇数索引

需要删除以

nf-

为前缀的元素上的某些类，并保留所有其他类。元素可以有一个或多个前缀为的类

<div class="custom-nf">
  <div class="input nf-input-outer nf-validation">
    <div class="nf-container">
      <div class="nf-outer nf-outer-input nf-outer-validation">
        <div class="nf-middle">
          <div class="nf-inner">
            <label for="dummy" class="nf-label"></label>
            <input id="dummy" type="text" class="nf-input"></div>
        </div>
      </div>
    </div>
  </div>
</div>

现在代码似乎运行良好，并删除带有前缀的类，但内部forEach部分不会删除类列表数组中显示为奇数索引的类。以下是代码运行后HTML的外观：

<div class="custom-nf">
  <div class="input nf-validation">
    <div class="">
      <div class="nf-outer-input">
        <div class="">
          <div class="">
            <label for="dummy" class=""></label>
            <input id="dummy" type="text" class=""></div>
        </div>
      </div>
    </div>
  </div>
</div>

运行代码将减少剩余的类，以此类推，直到所有类都消失，但这是不实际的，一个元素可能有多少个前缀为的类是未知的

如果你想看的话，我已经准备好了

---

为什么内部forEach会跳过奇数索引以及如何更正它？

修改

元素。从回调内部修改classList

会更改数组的索引，从而跳过刚删除的元素旁边的元素

只需更改外部回调：

(function() {
  // get elements with nf- prefix class
  var nfClasses = document.querySelectorAll('.custom-nf [class*="nf-"]');
  // each element found
  Array.prototype.forEach.call(nfClasses, function(element) {
    // here you gather class names to remove
    var toRemove = [];

    // each class per element with classList
    Array.prototype.forEach.call(element.classList, function(el) {
      // only for classes that match prefix nf-
      if (el.match(/^nf-.*/)) {
        // remove nf- class from the element
        toRemove.push(el);
      }
    });

    // now actually remove those classes
    toRemove.forEach(function(el) {
      element.classList.remove(el);
    });
  });
})();

---

我不确定，所以我不会回答这个问题，但我想从回调内部修改

元素.classList

会改变指针，从而跳过刚删除的元素旁边的元素。每次删除后数组都会变短，这一点非常有意义，现在你指出它似乎很明显。我猜我假设在forEach循环完成每个数组之前，数组长度不会受到影响；一定程度上存储索引，直到所有循环完成。非常感谢。谢谢你。

(function() {
  // get elements with nf- prefix class
  var nfClasses = document.querySelectorAll('.custom-nf [class*="nf-"]');
  // each element found
  Array.prototype.forEach.call(nfClasses, function(element) {
    // here you gather class names to remove
    var toRemove = [];

    // each class per element with classList
    Array.prototype.forEach.call(element.classList, function(el) {
      // only for classes that match prefix nf-
      if (el.match(/^nf-.*/)) {
        // remove nf- class from the element
        toRemove.push(el);
      }
    });

    // now actually remove those classes
    toRemove.forEach(function(el) {
      element.classList.remove(el);
    });
  });
})();