私の変数にもっと長いHTMLコレクションがあるのに、forEachループが1つの値しか取っていないのはなぜですか？

Question

function clearAllButton(){ 
    clearAll(); 
    printId(); 
    if(markEdit){ 
     markEditRow.classList.toggle("blue"); 
     markEditRow=undefined; 
     markEdit=false; 
    } 
    var fields1 = document.getElementsByClassName("red"); 
    Array.prototype.forEach.call(fields1,function(e){ 
     console.log(fields1, fields1.length); 
     e.classList.toggle("red"); 
     var id = e.getElementsByTagName('td')[0].innerHTML; 
     itemOperations.markRecord(id); 

    }); 
    printTotalRecords(); 
} 

これは私のコードで、 "fields1"変数に複数のフィールドがありますが、ループは最初のアイテムでのみ実行されています。各エレメントに対して毎回関数を実行する必要があります。私に助けてくださいJavaScriptのみを使用してください。

Hereは完全なコードです。しかし、あなたが私だけにこの機能と唯一の行を見なければならないと信じて、あなたは私よりもよく知っている必要が残り、私はこれに新しいです。

Answer 1

問題はgetElementsByClassNameがライブコレクションを返します。したがって、クラスを切り替えて要素を選択すると、コレクションが変更されます。代わりに、反復中に突然変異を避けるためにquerySelectorAllを使用することができます。別の関数のコードなし

var red = document.getElementsByClassName('red'); 
 

 
// logs 2 times 
 
[].forEach.call(red, function(field) { 
 
    field.classList.toggle('red') // this line "skips" next field 
 
    console.log(field.value) 
 
}) 
 

 

 
var blue = document.querySelectorAll('.blue'); 
 

 
// logs 4 times 
 
[].forEach.call(blue, function(field) { 
 
    field.classList.toggle('blue') 
 
    console.log(field.value) 
 
})

<input class="red" value="red1"> 
 
<input class="red" value="red2"> 
 
<input class="red" value="red3"> 
 
<input class="red" value="red4"> 
 
<input class="blue" value="blue1"> 
 
<input class="blue" value="blue2"> 
 
<input class="blue" value="blue3"> 
 
<input class="blue" value="blue4">