JavaScript-循环数组比我少

Question

I'm trying to loop an array which contains a list of elements returned by ClassName, but I can't loop all of them, because of the next situation:

var list = document.getElementsByClassName('class');

for (var i = 0; i < list.length; i++) {
    var theClass = list[i].className; //once got list[i].
    theClass = theClass.replace('class', '');
    list[i].className = theClass; //twice got list[i].
}

If the size of the list is = 4, I just can loop two times, because I'm getting twice each position per loop. Do you know what I can do and why it happens? Thank you.

Answer 1

The data structure returned by getElementsByClassName is Array-like and dynamic based on the DOM. Once you replace the class on the list item in question, you end up losing an item per iteration.

To fix this, you can take a copy of the returned values first before operating on them, or work backwards.

Take a copy:

var list = document.getElementByClassName('class')

var realList = []
Array.prototype.push.apply(realList, list)

for (var i = 0; i < realList.length; i++) {
 // do changes as you have already
}

Working backwards:

var list = document.getElementsByClassName('class')

for (i=list.length - 1; i >= 0; i--) {
   // do changes to list[i]
}

Another poster briefly mentioned a while loop which also works, but then their answer disappeared (I don't want to take credit for this!):

var list = document.getElementsByClassName('class')

while (list.length != 0) {
    // do changes to list[0]
}

If you write out what happens in your initial code, you can see the problem more clearly:

Iteration 1: i=0, list=[a,b,c,d], length = 4, list[i]=a
Iteration 2: i=1, list=[b,c,d], length = 3, list[i]=c
Before Iteration 3: list=[b,d], i=2, length = 2, loop breaks

Now writing out what happens when using the reverse loop:

Iteration 1: i=3, list=[a,b,c,d], length = 4, list[i]=d
Iteration 2: i=2, list=[a,b,c], length = 3, list[i]=c
Iteration 3: i=1, list=[a,b], length = 2, list[i]=b
Iteration 4: i=0, list=[a], length = 1, list[i]=a

All these solutions are variations on this solution of avoiding using i to reference the middle parts of the array-like result value of getElementsByClassName so that the dynamic nature of it is dealt with.