这不是代码中的问题,但是我无法理解问题背后的原因。首先,请看一下代码:

HTML:

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>Head First : Javascript</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css.css">
        <script type="text/javascript" src="cookie.js"></script>
    </head>
    <body>
        <div id="row1">
            <p>False</p>
            <p>False</p>
            <p>True</p>
            <p>True</p>
            <p>False</p>
        </div>
        <div id="row2">
            <p>False</p>
            <p>False</p>
            <p>True</p>
            <p>False</p>
            <p>False</p>
        </div>
        <div id="row3">
            <p>False</p>
            <p>True</p>
            <p>True</p>
            <p>True</p>
            <p>True</p>
        </div>
        <div id="row4">
            <p>True</p>
            <p>False</p>
            <p>False</p>
            <p>True</p>
            <p>False</p>
        </div>
        <script type="text/javascript" src="javascript.js"></script>
    </body>
</html>


CSS:

p{
    display:inline-block;
    width:50px;
    margin:30px;
    text-align:center;
}


JS:

function setElementColor(){
    var numberRows = parseInt(window.prompt("Enter total number of rows that you are seeing on the screen."));

    for(var i = 1; i <= numberRows; i++){
        var firstElement = document.getElementById('row' + i).firstElementChild;
        var counterElement;
        //For now, total elements in 1 row = 5
        for(var q = 1; q <= 5; q++){
            if(q == 1){
                firstElement.style.backgroundColor = "red";
                counterElement = firstElement.nextSibling;
            }
            else{
                counterElement.style.backgroundColor = "green";
            }
            counterElement = counterElement.nextElementSibling;
        }
    }
}
setElementColor();


现在,这可能是一个愚蠢的问题,但这是有道理的(我相信)。您看到的代码是正确的,并且毫无疑问可以正常工作。但是,您可以在第一个nextSibling语句中看到该if属性吗?那就是让我困惑的地方。

现在,所有段落之间都有空格,因此这意味着所有浏览器都将这些空格视为textNode(IE除外)。现在,通过逻辑的方法,应该在其中有一个nextElementSibling属性,以便代码可以期待下一个Element,而忽略注释/ textNode,但是我尝试了一下,但这种方法不起作用。

有人可以给我一个令人满意的理由吗?

最佳答案

在您的第一个if中,将counterElement设置为nextSibling,即textnode

if
{
   counterElement = firstElement.nextSibling; //now counterElement is the textnode
}
else
{
}
counterElement = counterElement.nextElementSibling; //no matter if the counterElement is a textnode or a <p> the next element in the sibling tree is a <p>


但是无论q和if..else分支是否采用,都在if..else块之后,将counterElement设置为下一个Element兄弟,以便无论起始点是textnode还是包含段落,下一个元素都将是同级段落。如果您在q == 1块中设置counterElement = firstElement,则代码的行为相同



顺便说一句,要摆脱固定的上限(列)并同时释放if..else,您还可以使用类似

for(var i = 1; i <= numberRows; i++){
    var el = document.getElementById('row' + i).firstElementChild;
    var q = 1;
    while (el!=null){
        el.style.backgroundColor = q++ == 1 ? "red" : "green";
        el = el.nextElementSibling;
    }
}

10-05 21:03
查看更多