Pętla tylko iteruje raz podczas próby usunięcia klas z elementów

Question

W JavaScript mam funkcję, która powinna znaleźć elementy na stronie, które mają "połączoną" klasę, a po kliknięciu przycisku klasy dla tych elementów są wyczyszczone . Napisałem ten kod:

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

Jednak tylko usuwa atrybut klasy pierwszego "połączonego" elementu na stronie. Kiedy mam dwa "połączone" elementy, potwierdziłem, że tablica "prev_connected" zawiera 2 wartości, ale z jakiegoś powodu pętla for nigdy nie osiąga drugiej. Czy jest coś, co robię źle? Dzięki.

Answer 1

Wynik getElementsByClassName jest na żywo, co oznacza, że ​​jak usunąć klasę atrybutu będzie również usunąć ten element z wyniku . Korzystanie z querySelectorAll jest bardziej powszechnie obsługiwane i zwraca statyczną wartość NodeList.

Możesz także łatwiej iterować listę używając pętli for ... in.

Nie polecam tworzenia dodatkowej kopii listy na żywo tylko po to, aby stała się statyczna, należy użyć metody, która zwraca zamiast niej statyczną listę 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

Jest to spowodowane tym, że prev_connected jest aktywną postacią. Kiedy aktualizujesz element o tę klasę, usuwa go z węzła, co oznacza, że ​​długość węzła zmienia się o jeden, co oznacza, że ​​j próbuje znaleźć element 2 w węzłowej długości 1, dlatego nie działa po pierwszym iteracja.

Możesz to zobaczyć na konsoli w wersji this demo.

Jednym ze sposobów można naprawić to poprzez przekształcenie NodeList do tablicy:

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

Answer 3

Należy iteracyjne w przeciwnym kierunku, a elem[i].classList.remove('name') do usuwania nazwy klasy z każdego elementu 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]); 
    } 
} 

Są kolejne odpowiedzi: https://stackoverflow.com/a/14409442/4365315