个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
这不完全是代码中的问题，但我无法理解问题背后的原因。首先，请看一下代码:
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();
现在，这可能是一个愚蠢的问题，但它是有道理的(我相信)。您看到的代码是正确的，并且可以毫无疑问地工作。但是，您能在第一个 if 语句中看到 nextSibling 属性吗？这就是让我困惑的地方。
现在，所有段落之间都有空格，这意味着所有浏览器都会将这些空格视为 textNode(IE 除外)。现在，根据逻辑，那里应该有一个 nextElementSibling 属性，这样代码就可以期待下一个元素，忽略评论/文本节点，但我试过了，那是行不通的.
谁能给我一个令人满意的理由？
最佳答案
在您的第一个 if 中，counterElement 设置为 nextSibling，作为文本节点
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 block 之后，counterElement 被设置为下一个 Element 兄弟，因此无论起点是文本节点还是包含段落，下一个元素将是同级段落。如果您在 q == 1 block 中设置 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;
}
}
关于javascript - nextSibling 而不是 nextElementSibling？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33630527/
25
4
0
我在元素内部有几个 Javascript 输入，并且在它们下面有 s 。 我还有一个 javascript 函数，如果有字母输入，它会删除输入的值，以便它只接受数字。 t=function(ele
我正在尝试使用 vanilla JS 制作推荐模块，当我对集合使用“for”循环时遇到问题 - 控制台显示 testimonials[i].nextElementSibling is null。当我手
我目前正在编写一个 Accordion 并遇到了与 nextSibling difference between IE and FF? 中描述的相同问题。 - Microsoft 的 nextSibl
这个问题已经有答案了: How do I return the response from an asynchronous call? (42 个回答) 已关闭 4 年前。 我正在使用 CKEdito
我正在尝试搜索特定文本以在找到链接时突出显示该链接。因为链接不在h4标签里面我不知道怎么解决。 html代码 Title P ... Title X ABC EFG MNO X
这不完全是代码中的问题，但我无法理解问题背后的原因。首先，请看一下代码: HTML: Head First : Javascript
我在设置此脚本以在我的 Wordpress 站点中工作时遇到了这个问题。代码使用 nextElementSibling 获取相同级别的元素(制作 Accordion )，如 W3schools 页面所
示例:https://jsfiddle.net/theandybob/6wuc39d9/ 使用 IE 时，如果我有注释并尝试从中访问 nextElementSibling 属性，我会得到 undefi
我用纯 JS 编写了一个灯箱脚本: HTML: JS: function pLightbox(objPhoto){ var path=objPhoto.src; HTMLtext = '
有测试代码: 1 2 var id = document.getElementById("abc"); var div = id.nextE
在下面的代码中，没有 sibling 。 previousElementSibling正确返回 null ，但是 nextElementSibling没有。 nextEleme
虽然我似乎偶尔会得到奇怪的结果，但在我看来这些结果是一样的，所以有人可以描述一下区别吗？ 最佳答案 “nextSibling”返回下一个节点对象，而“nextElementSibling”返回下一个元
我的html是这样的: me! convert! prints 函数只是将函数参数输出到控制台日志上。我需要立即找到 anchor 标记旁边的 a 标记的 href 值。即单击按钮时，我需要获取值
我正在尝试使用 nextElementSibling 以编程方式移动表单中的焦点，但是我也在使用 Typescript 并想要输入我的变量/常量... 我已经成功无需打字，并使用以下内容: myFun
在这个 HTML 结构中: one a two b 为什么会出现以下脚本: // Function to change the conten
这只是一个简单的下拉菜单...在 Chrome、FF 和 Safari 中运行良好。但在 IE 中:无法获取未定义或空引用的属性“样式” document.getElementById('icon')
你如何测试 child 实际上包含下一个元素兄弟或如果没有找到下一个兄弟？ child = await page.evaluateHandle(el => el.nextElementSibling,
Here is div-01 Here is div-02 它们不是同一个东西吗？ 两者都返回紧随其后的节点。我读了很多文章，但在我看来都喜欢同样的东西，但不知道在哪里使用其中一个与另一个？ 最佳答案
我需要更新一些旧的 Javascript 以跨浏览器兼容。该代码最初是为 IE6 创建的，并且由于 HTML 的布局方式而大量使用 nextSibling 和 previousSibling。 显然
Javascript 新手。我最近发布了一个关于创建多个多层 Accordion 的问题。我得到了一些很好的反馈，但有人提到，如果我的 HTML 设置正确，我可以通过使用 nextElementSib
我是一名优秀的程序员,十分优秀！