Array forEach跳過奇數索引

Question

需要刪除前綴爲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> 

我有低於該腳本將獲取的所有元素與nf-類的前綴，然後爲每個元素的外觀在班級列表屬性併爲每個班級決定，如果當前類的字符串匹配在正則表達式中定義的前綴。如果爲true，則從元素中移除該類。

(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){ 
    // each class per element with classList 
    Array.prototype.forEach.call(element.classList, function(el){ 
     // only for classes that match prefix nf- 
     if (el == el.match(/^nf-.*/g)) { 
     // remove nf- class from the element 
     element.classList.remove(el); 
     } 
    }); 
    }); 
})(); 

現在代碼似乎運行細並與前綴但內的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> 

運行代碼會降低其餘類，依此類推，直到所有的都走了，但是這是不實際且有一個未知的多少班一個元素可能帶有前綴。

我有一個JSFiddle啓動和運行，如果你想看看。

爲什麼內部forEach跳過奇數索引，我該如何糾正它？

Answer 1

在回調中修改element.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); 
    }); 
    }); 
})(); 

看到它的行動在https://jsfiddle.net/fcu1ypds/5/