javascript - JS : Attempting to remove a css class from an array of objects only removes from half of them

标签 javascript css arrays

<分区>

我的 html 中有几个类为“高”的 DOM 元素,我想获取所有类为“高”的元素并从中删除该类,我已经尝试过了(我正在使用 Chrome 的控制台进行测试代码):

var check= document.getElementsByClassName("high");
for(var k = 0; k < check.length; k++){
    check[k].classList.remove("high");
}

但问题是,它似乎只从数组中的一半元素中删除类并停止。如果我之后执行 console.log(check);,我可以看到该数组的一半元素已被删除。然而,这似乎有效:

var check= document.getElementsByClassName("high");
while(check.length > 0){
    check[0].classList.remove("high");
}

我希望第一个代码可以工作,但现在第二个代码可以工作了,我不知道这是如何发生的以及为什么会发生。

已解决

问题已得到回答,但对于那些有兴趣在实际中看到这个问题的人:

Here's A Fiddle

最佳答案

document.getElementsByClassName 返回一个实时 HTML 集合,这可能会在您遍历集合并更改其中一些集合时导致问题。

改用 document.querySelectorAll('.high')。它返回一个静态节点列表,您不会遇到这个问题。

More information on HTML collections/node lists .

关于javascript - JS : Attempting to remove a css class from an array of objects only removes from half of them,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36036351/

上一篇:html - 选择单个链接以更改 css 属性

下一篇:jquery - 单击按钮时弹出窗口不起作用

相关文章:

javascript - 在没有链接的情况下将 css 按钮更改为 css active

css - 如何在div上应用css指针抓取?

c - 如何从文件中读取所有字符并将其存储在二维数组中而不使用\n?

python - 连续替换数组或列表中的值

javascript - 将 Javascript 确认消息框标签从"is"重命名为“继续”

javascript - 我应该在我的 UI 组件库中的什么地方包含 React 作为依赖项?

javascript - 使用ajax获取json数据时出错

html - 使用 HTML/CSS 实现最小进度条

java - 使用数组创建字符串

javascript - jQuery mouseenter 和 mouseleave 创建闪烁