Question

我有非常简单的代码循环遍历数组中的元素并检查是否index % 2 == 0。如果是这样，它应该改变颜色。

var e = document.getElementById("list").childNodes;
for(i = 0; i < e.length; i++){
    console.log(i % 2);
    if(i % 2 == 0)
        e[i].style = "color: red";
}

它只是不起作用。即使console.log(i % 2)每隔一个条目打印0。如果我将其更改为if(true)，则所有这些都变为红色。我做错了什么？

Answer 1

应该是var e = document.getElementById("list").children;而不是var e = document.getElementById("list").childNodes;。

childNodes包含文本节点。它们不仅具有style属性，而且在每个列表项之后都可能存在循环应用的换行符，因为每个第二个子节点都是换行符。

例如

<ul id="list">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

表示：

<ul id="list">:
  #text "  \n"
  <li>:
    #text "A"
  #text "  \n"
  <li>:
    #text "B"
  #text "  \n"
  <li>:
    #text "C"
  #text "\n"

childNodes是所有<li>和所有#text。循环可能仅针对文本节点。 children仅包含所有<li> s。

此外，最好使用e[i].style.color = "red";。

Answer 2

var e = document.getElementsByTagName("li");

for(i = 0; i < e.length; i++){
    console.log(i % 2);
    if(i % 2 == 0)
        e[i].style = "color: red";
}

<ul>
  <li id="list">test</li>
<ul>

尝试使用getElementsByTagName。

Answer 3

代码似乎很好，但你可以尝试添加括号吗？

if( (i % 2) == 0 )

如果条件满足但它不适用（模数）

3 个答案: