forループは、要素からクラスを削除しようとしたときに1回だけ繰り返されます

Question

Javascriptでは「接続された」クラスを持つページ上の要素を見つける必要があり、ボタンをクリックするとこれらの要素のクラスがクリアされます。私はこのコードを書いています：

var prev_connected = document.getElementsByClassName("connected"); 
if (prev_connected.length > 0) { 
    for (var j = 0; j < prev_connected.length; j++) { 
     prev_connected[j].removeAttribute("class"); 
    } 
} 

しかし、これはページ上の最初の "接続された"要素のクラス属性を削除するだけです。 2つの "接続された"要素があるとき、私は "prev_connected"配列が2つの値を保持することを確認しましたが、何らかの理由でforループが2番目の値に達することはありません。私が間違っていることはありますか？ありがとう。

Answer 1

getElementsByClassNameの結果は、あなたがクラス属性を削除すると、それはまた、その結果からその要素を削除することを意味し、ライブであります。 querySelectorAllを使用するとより広くサポートされ、静的なNodeListが返されます。

さらに、for ... inループを使用してリストを反復することも簡単にできます。

スタティックにするためにライブリストの余分なコピーを作成することはお勧めできませんが、スタティックなNodeListを代わりに返すメソッドを使用する必要があります。

var prev_connected = document.querySelectorAll(".connected"); 
 
document.getElementById('demo').onclick = function() { 
 
    for(var i in Object.keys(prev_connected)) { 
 
     prev_connected[i].removeAttribute("class"); 
 
    } 
 
}

.connected { 
 
    background: rgb(150,200,250); 
 
}

<div class="connected">Hello</div> 
 
<div class="connected">Hello</div> 
 
<div class="connected">Hello</div> 
 
<div class="connected">Hello</div> 
 
<div class="connected">Hello</div> 
 
<button id="demo">Remove the classes!</button>

Answer 2

prev_connectedがライブノードリストであるためです。そのクラスで要素を更新すると、それはノードリストから削除されます。つまり、ノードリストの長さは1になります。つまり、jは長さ1のノードリスト内の要素2を検索しようとしています。繰り返し。

これは、コンソールでthis demoに表示されます。あなたはこの問題を解決することができ

一つの方法は、アレイにノードリストを変換することにより、次のとおりです。

var prev_connected = [].slice.call(document.getElementsByClassName("connected")); 

Answer 3

あなたは反対の方向に反復処理し、各要素のクラス名を除去するための elem[i].classList.remove('name')を使用する必要があります

Demo

document.getElementById("button").onclick = function() { 
    var prev_connected = document.getElementsByClassName("connected"); 
    console.log(prev_connected); 
    for (var i = prev_connected.length - 1; i >= 0; i--) { 
     prev_connected[i].classList.remove("connected"); 
     console.log(i, prev_connected[i - 1]); 
    } 
} 

は別の答えがある：https://stackoverflow.com/a/14409442/4365315