if-conditionが満たされても適用されません（モジュロ）

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)が1秒おきに0を印刷しても。私がif(true)に変更すると、それらのすべてが赤くなります。私は間違って何をしていますか？

Answer 1

それは、var e = document.getElementById("list").children;の代わりvar e = document.getElementById("list").childNodes;でなければなりません。

childNodesにはテキストノードが含まれます。彼らはstyleプロパティを持っていないだけでなく、すべてのリストアイテムの後にも、2番目ごとの子ノードが改行であるため、ループが適用される改行がある可能性があります。

<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> s及び全て#text Sです。ループはテキストノードのみを対象としています。 childrenには<li>がすべて含まれています。

さらに、e[i].style.color = "red";を使用することをお勧めします。

Answer 2

コードは良いようですが、かっこを追加できますか？

if((i % 2) == 0) 

Answer 3

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を使用してみてください。