6

私はこの本当に奇妙な問題を抱えています。forloopは、すべてのdivを「original」のクラスに置き換え、テキスト入力を「new」のクラスに置き換えることになっています。ループを実行すると、1つおきのdivが入力に置き換えられるだけですが、ループを実行してdivのクラスを置き換え、タグをinputに変更しない場合は、すべての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コレクションの要素の1つが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

さらに別の解決策は、配列のようなオブジェクトから配列を作成し、これを繰り返すことです。例えば：

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 に答える
0

理由はわかりませんが、これは最終的には機能するようでした。

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

私のローダーは基本的には新しい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 に答える