javascript - "for"在 NodeList 上循环以更改类名

<分区>

这应该获取 class="one_level" 的每个元素并将其 className 更改为 four_level。但这不会发生。只有第一个列表项的外观发生了变化，第二个仍然是一样的。

HTML:

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>DOCUMENT OBJECT MODEL</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    <body>
        <ul>
            <li class="one_level" style="background-color:black; color:white; margin:5px; ">ONE</li>
            <li class="one_level" style="background-color:black; color:white; margin:5px ">TWO</li>
            <li class="two_level" style="background-color:orange; color:red; margin:5px">THREE</li>
            <li class="two_level" style="background-color:orange; color:red; margin:5px">FOUR</li>
        </ul>
        <div id="getValues"></div>
        <script src="javascript.js"></script>
    </body>
</html>

CSS:

.four_level{
    border:solid 5px orange;
    -webkit-border-radius:5px 6px;
}
.five_level{
    border:solid 5px pink;
    -webkit-border-radius:5px 6px;
}

JS:

//Get elements for class: one_level
var classOneSet = document.getElementsByClassName("one_level");
var lengthList = classOneSet.length;

//Change appearance
var i;
for (i = 0; i < lengthList; i++){
    classOneSet.item(i).className = "four_level";
}

最佳答案

getElementsByClassName 方法返回一个实时元素列表。当您更改第一个元素的类时，它将从列表中删除。当您尝试更改第二个元素时，它已移动到列表中的第一个位置，而您不会在第二个位置找到它。如果您要更改两个以上的元素，您会看到它更改了所有其他元素。

如果您向后循环遍历列表，它会起作用:

window.onload = function(){

  //Get elements for class: one_level
  var classOneSet = document.getElementsByClassName("one_level");
  var lengthList = classOneSet.length;

  //Change appearance
  var i;
  for (i = lengthList - 1; i >= 0; i--){
    classOneSet.item(i).className = "four_level";
  }

};

.four_level { background: red; }

        <ul>
            <li class="one_level">ONE</li>
            <li class="one_level">TWO</li>
            <li class="two_level">THREE</li>
            <li class="two_level">FOUR</li>
        </ul>

关于javascript - "for"在 NodeList 上循环以更改类名，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33107929/

上一篇：javascript - 如何使用 Angular Ui-Router 减少具有相同 'states' 的 'templateUrl' 的数量

下一篇：javascript - 搜索项目导致滞后

html - 来自 background-image 属性的 CSS 宽度和高度属性

javascript - 为什么 JQuery Growfield 插件为我的文本区域提供默认值 "111 111"？

javascript - 如何将对象数组从actionscript传递到javascript

javascript - 如何获取按钮的数据属性并显示该页面？

javascript - Mysql查询时间问题？

html - 制作音乐播放列表

html - 信息在源文件 View 中不可见

jquery - 从类中删除 (!important) 属性

jquery - 有没有更好的方法来构建这个顶级菜单？