Javascript替换Child/Loop问题

Question

我有一个非常奇怪的问题,我有一个forloop,它应该用"原始"类替换所有div,用"new"类替换文本输入.当我运行循环时,它只用输入替换每个其他div,但如果我运行循环只是替换div的类而不是将标记更改为输入,它会执行每一个div,而不仅仅是做其他人.

这是我的循环代码,以及实时版本的链接:这里的实时版本

function divChange()    {
    var divs = document.getElementsByTagName("div");
    for (var i=0; i<divs.length; i++) {
        if (divs[i].className == 'original') {
            var textInput = document.createElement('input');
            textInput.className = 'new';
            textInput.type = 'text';
            textInput.value = divs[i].innerHTML;
            var parent = divs[i].parentNode;
            parent.replaceChild(textInput, divs[i]);
        }
    }
}

Answer 1

因为divs当div从DOM中删除其中一个元素时更新集合,所以最终会跳过div,因为您i没有使用集合的重建索引进行更新.

一种常见的解决方案是反向迭代.

function divChange()    {
    var divs = document.getElementsByTagName("div");
    for (var i=divs.length - 1; i > -1; i--) {
        if (divs[i].className == 'original') {
            var textInput = document.createElement('input');
            textInput.className = 'new';
            textInput.type = 'text';
            textInput.value = divs[i].innerHTML;
            divs[i].parentNode.replaceChild(textInput, divs[i]);
        }
    }
}