这不是代码中的问题,但是我无法理解问题背后的原因。首先,请看一下代码:
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;
}
}