Re: [問題] dom的getElementsByClassName

看板Ajax作者bakedgrass (蒙古烤小草)時間5年前 (2019/05/01 05:23)推噓4(4推 0噓 1→)

留言5則, 4人參與討論串1/1

※ 引述《flowwinds (..)》之銘言： : 大家好, : 寫了個function : --------------------------------------------------------- : function removeClass(dom_root, className){ : var doms = dom_root.getElementsByClassName(className); : if(doms.length > 0){ : var i; : console.log("doms length:"+doms.length); : for (i = 0; i < doms.length > 0;i=i+1) { : console.log("before length:"+doms.length); : if(doms[i] != null){ : doms[i].classList.remove(className); : } : console.log("after length:"+doms.length); : } : } : } : --------------------------------------------------------- : 印出的結果是 : -------------------- : doms length:3 : before length:3 : after length:2 : before length:2 : after length:1 : -------------------- : 而array就有一個element就沒處理到 : 有人知道這是甚麼原因嗎? : 看起來就是class remove掉後, getElementsByClassName()的結果也會即時更新? : 謝謝~ 其實原因你自己也說了，你修改doms的內容，doms就改變了，連帶著doms.length也會跟著變（這個你自己也可以從console.log的結果中看出來）。所以可以先用一個變數把原初的length存起來給迴圈使用。另一個問題是你的doms陣列越來越小，你卻用越來越大的index來處理這個陣列。比方說第一次迴圈時你的doms可能是[dom, dom, dom]，然後你處理第0個dom (i=0)。第二次迴圈時你的doms是[dom, dom]，然後你處理第1個dom (i=1)。第三次迴圈時你的doms是[dom]，然後你處理第2個dom (i=2)。看出問題來了嗎？其實你可以一直處理第0個dom就可以了。修改後如下： function removeClass(dom_root, className){ var doms = dom_root.getElementsByClassName(className); var domLength = doms.length; //存初始的長度 if(doms.length > 0){ var i; console.log("doms length:"+doms.length); for (i = 0; i < domLength > 0;i=i+1) { console.log("before length:"+doms.length); if(doms[0] != null){ // 改成刪除第0個元素的class doms[0].classList.remove(className); } console.log("after length:"+doms.length); } } } 希望有幫助到你 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 50.68.15.70 ※ 文章網址: https://www.ptt.cc/bbs/Ajax/M.1556659415.A.260.html ※ 編輯: bakedgrass (50.68.15.70), 05/01/2019 05:30:32 ※ 編輯: bakedgrass (50.68.15.70), 05/01/2019 05:32:05