Javascript 替换子/循环问题

Question

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

这是我的循环代码，以及实时版本的链接:live version here

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

因为当 div 元素之一从 DOM 中删除时 divs 集合会更新，所以您最终会跳过 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]);
        }
    }
}