Per ciclo esegue una sola iterazione quando si tenta di rimuovere classi dagli elementi

Question

In Javascript ho una funzione che dovrebbe trovare gli elementi nella pagina che hanno la classe "connected" e quando si fa clic su un pulsante le classi per questi elementi vengono cancellate . Ho scritto questo codice:

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"); 
    } 
} 

Tuttavia, elimina sempre l'attributo di classe del primo elemento "connesso" nella pagina. Quando ho due elementi "connessi", ho confermato che l'array "prev_connected" contiene 2 valori, ma per qualche motivo il ciclo for non raggiunge mai il 2 °. C'è qualcosa che sto sbagliando? Grazie.

Answer 1

Il risultato di getElementsByClassName è vivo, il che significa che come si rimuove la classe attributo sarà anche togliere quell'elemento dal risultato . L'utilizzo di querySelectorAll è più ampiamente supportato e restituisce una NodeList statica.

Inoltre, è possibile più facilmente iterare l'elenco utilizzando un ciclo for ... in.

Non suggerirei di creare una copia extra dell'elenco live solo per renderlo statico, è necessario utilizzare un metodo che restituisce invece un NodeList statico.

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

Ciò è dovuto a prev_connected essere un elenco di nodi in diretta. Quando aggiorni l'elemento con quella classe lo rimuove dalla lista dei nodi, il che significa che la lunghezza della lista dei nodi si riduce di uno che significa che j sta cercando di trovare l'elemento 2 in un nodelist di lunghezza 1, motivo per cui non funziona dopo la prima iterazione.

È possibile vedere ciò che accade nella console in this demo.

Un modo per risolvere questo problema è quello di convertire il nodelist ad un array:

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

Answer 3

Si dovrebbe scorrere nella direzione opposta e utilizzare elem[i].classList.remove('name') per rimuovere il nome della classe da ogni elemento 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]); 
    } 
} 

Ci sono un altro risponde: https://stackoverflow.com/a/14409442/4365315