作者bakedgrass (蒙古烤小草)
看板Ajax
标题Re: [问题] dom的getElementsByClassName
时间Wed May 1 05:23:33 2019
※ 引述《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://webptt.com/cn.aspx?n=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
1F:推 flowwinds: 谢回覆 会修改 是想问remove後为何doms也即时更新了? 05/01 15:45
2F:→ flowwinds: 查了一下 api docs就是这样写了 感谢回覆了 05/01 15:59
3F:推 s25g5d4: 改用 querySelectorAll 就不会有这个行为了 05/01 22:56
4F:推 wotupset: 推楼上 不想动态更新就用querySelectorAll 05/11 20:52
5F:推 ducati1224: Zzㄏˇ 05/14 13:05