Javascript：在頁面加載時按類名獲取所有元素不起作用

Question

我正在嘗試創建一個腳本，該腳本將在頁面加載時將頁面上的現有元素轉換為新元素，但是顯然會失敗。

這是這些元素數組的一個非常奇怪的輸出（聲明那里有三個元素，但只顯示一個）：

 <html> <head> <script> var f__inputs = []; document.addEventListener('DOMContentLoaded', function () { f__init(); }, false); function f__init(){ f__inputs = document.body.getElementsByClassName("superinput"); console.log(f__inputs); f__insert(); } function f__insert(){ for(var i=0;i<f__inputs.length;i++){ f__inputs[i].id = "superinput-wrapper-" + i; f__inputs[i].className = "superinput-wrapper"; var d = f__inputs[i].getAttribute("data-fields"); for(var j=0;j<d;j++){ var input = document.createElement("input"); input.setAttribute("data-wrap",i); input.setAttribute("data-pos",j); input.setAttribute("size","1"); input.setAttribute("type","text"); input.id = "superinput-input-" + j; input.className = "superinput-input"; if(j!=0){ input.setAttribute("disabled","true"); input.disabled = true; } f__inputs[i].appendChild(input); } } } </script> </head> <body> <p> <b>Task 90.</b> Lorem ipsum dolor sit amet... <div class="superinput" data-fields="6"></div> </p> <p> <b>Task 91.</b> Lorem ipsum dolor sit amet... <div class="superinput" data-fields="6"></div> </p> <p> <b>Task 91.</b> Lorem ipsum dolor sit amet... <div class="superinput" data-fields="6"></div> </p> </body> </html>

知道為什么會這樣嗎？

Answer 1

兩件事情。

將鼠標懸停在[i]上，您會看到它告訴您，展開數組時數組的值是“凍結的”，並且可能無法反映實時值。
getElementsByClassName是活動列表 。 這意味着當您設置className = "something-else" ，該名稱將從列表中刪除。 因此，建議您使用for( i=l-1; i>=0; i--)而不是通常的循環來遍歷它們。

Javascript：在頁面加載時按類名獲取所有元素不起作用

問題描述

1 個解決方案

解決方案1
2 已采納 2016-05-29 20:04:08

Javascript：在頁面加載時按類名獲取所有元素不起作用

問題描述

1 個解決方案

解決方案1 2 已采納 2016-05-29 20:04:08

解決方案1
2 已采納 2016-05-29 20:04:08