JavaScriptのforループスキップ要素はなぜですか？

Question

私はforのループを持っていて、一連の要素を実行し、それぞれから'selected'クラスを削除しています。ただし、1秒おきに繰り返されます。私はj--を追加することでこの問題を回避できることを発見しました。これは私のコードを長くすること以外は問題ありません。しかし、なぜ誰かがスキップする理由を説明でき、おそらくこのコードを書くためのより簡潔な方法を示唆するのだろうかと思います。 （私はまだロープを学習し、私は何が起こっているか理解しておくようにしたいんだ。）お時間を

var selections = document.getElementsByClassName(name + 'selected'); 
for (var j = 0; j < selections.length; j++) { 
    selections[j].classList.remove('selected'); 
    j--; // the fix 
} 

// where name is a present variable 

感謝を！

Answer 1

getElementsByClassName()がlive HtmlCollectionを返すためです。つまり、HtmlCollectionが自動的に更新されるため、要素から「selected」クラスを削除すると、その要素はで、コレクションから削除されます。

あなたは単純に行うことができます。

...代わりに。

---

また、コメントでPaul Roubで指摘したように、あなたは逆に反復することができます。

for (var j = selections.length-1; j >= 0; j--) { 
    selections[j].classList.remove('selected'); 
} 

または、配列にコレクションをコピーすることによって、いずれか、完全にライブHtmlCollectionを避けることができます。

var selections = Array.prototype.slice.call(document.getElementsByClassName(name + 'selected')); 
for (var j = 0; j < selections.length; j++) { 
    selections[j].classList.remove('selected'); 
} 

...または、代わりにquerySelectorAllを使用して、コメントでYury Tarabankoで指摘したように、

var selections = document.querySelectorAll('.' + name + 'selected'); 
for (var j = 0; j < selections.length; j++) { 
    selections[j].classList.remove('selected'); 
} 

Answer 2

getElementsByClassNameはライブHTMLコレクションです。このクラスの要素を削除すると、その要素が更新されます。つまり、要素を削除した場所にあった後のインデックスにあったものを意味します。後方ループ

var selections = document.getElementsByClassName('selected'); 
 
console.log("before: ", selections.length); 
 
selections[0].classList.remove("selected"); 
 
console.log("after: ", selections.length);

<div class="selected"></div> 
 
<div class="selected"></div> 
 
<div class="selected"></div> 
 
<div class="selected"></div> 
 
<div class="selected"></div>

項目は、シフトダウンされていないため、動作します。

オプションはwhileループを実行するオプションです。

var selections = document.getElementsByClassName('selected'); 
while(selections.length) { 
    selections[0].classList.remove("selected"); 
}