6

我有一个非常奇怪的问题，我有一个forloop，它应该用“原始”类替换所有div，用“新”类替换文本输入。当我运行循环时，它只用输入替换所有其他 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]);
        }
    }
}
4

4 回答 4

6

因为divs当它的元素之一从 DOM 中删除时集合会更新div，所以您最终会跳过 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]);
        }
    }
}
于 2012-11-04T16:47:35.463 回答
1

您可以使用的另一个解决方案是将实时 HTMLCollection 复制到惰性数组，并使用您的原始逻辑：

function divChange() {
    var divs = document.getElementsByTagName("div");
    divs = Array.prototype.slice.call( divs ); //convert to array
    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]);
        }
    }
}

divChange();

http://jsfiddle.net/2UCZa/1/

于 2012-11-04T16:57:39.460 回答
0

我不知道为什么，但这似乎最终起作用了：

ModalBody.insertAdjacentHTML('afterbegin', loader.outerHTML);

我的 loader 基本上只是一个新的 div，但是在 div 里面有这个加载符号，在加载内容时会出现。

var loader = document.createElement('div');
loader.classList.add('loader');
loader.classList.add('is-loading');
loader.classList.add('mt-5');

所以只有这条线

ModalBody.insertAdjacentHTML('afterbegin', loader);

...当内容被加载时，很快就会显示 [object HTMLDivElement]，3 秒后或多或少会出现正确的内容。一旦我添加了这个“.outerHTML”，事情就变得正确了。我仍然是一个超级初学者。那么，也许有人也可以解释为什么这有效？

于 2021-03-08T11:46:34.970 回答
0

另一种解决方案是从一个类似数组的对象创建一个数组，并对其进行迭代。例如：

var divs = document.getElementsByTagName("div");

Array.from(divs).forEach(function(el) {
  if (el.className == 'original') {
        var textInput = document.createElement('input');
        textInput.className = 'new';
        textInput.type = 'text';
        textInput.value = el.innerHTML;
        var parent = el.parentNode;
        parent.replaceChild(textInput, el);
    }
});

我最喜欢这个，因为它产生的代码最少，而且非常清晰！

于 2018-07-23T19:33:40.477 回答