javascript - if 条件满足但不适用(模)

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 s。该循环可能仅针对文本节点。 children仅包括所有<li> s。

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