个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
26
4
我正在看一本学习 JavaScript 的书，它似乎有编码错误，因为我正在看的东西似乎不起作用。这是我拥有的:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Examples of moving around in the DOM using native JavaScript methods</title>
<meta charset="UTF-8">
<!-- CSS Stylesheet -->
<link rel="stylesheet" href="css/show.css">
</head>
<body>
<!-- Let's get the parent element for the target node and add a class of "active" to it -->
<ul id="nav">
<li><a href="/" id="home">Home</a></li>
<li><a href="/about" id="about">About Us</a></li>
<li><a href="/contact" id="contact">Contact Us</a></li>
</ul>
<input type="button" onclick="targetClass()" value="Target the Class"/>
<input type="button" onclick="prevNextSibling()" value="Target Next and Previous Sibling"/>
<script src="js/js.js"></script>
</body>
</html>
JavaScript:
// This block of JavaScript obtains the parent element
// target the "about" link and apply a class to its parent list item
function targetClass()
{
document.getElementById("about").parentNode.setAttribute("class", "active");
}
// This block of code adds a Class to Previous and Next Sibling Nodes
function prevNextSibling()
{
// get "about" parent, then its previous sibling and apply a class
document.getElementById("about").parentNode.previousSibling.setAttribute("class", "previous");
// get "about" parent, then its next sibling and apply a class
document.getElementById("about").parentNode.nextSibling.setAttribute("class", "next");
}
根据这本书，我应该得到的生成的 HTML 的输出是:
<ul id="nav">
<li class=" previous" ><a href="/" id="home">Home</a></li>
<li class=" active" ><a href="/about" id="about">About Us</a></li>
<li class=" next" ><a href="/contact" id="contact">Contact Us</a></li>
</ul>
但是当我点击我的文本框时没有任何反应。
我该如何解决这个问题？
最佳答案
一些浏览器在 DOM 元素之间插入空格
阅读以下链接中的注释部分
https://developer.mozilla.org/en-US/docs/Web/API/Node.nextSibling
解决方案是使用 prevElementSibling 和 nextElementSibling .这将选择下一个相同类型的兄弟
这有效:http://jsfiddle.net/E2k6t/1/
function targetClass()
{
document.getElementById("about").parentNode.setAttribute("class", "active");
}
function prevNextSibling()
{
document.getElementById("about").parentNode.previousElementSibling.setAttribute("class", "previous");
document.getElementById("about").parentNode.nextElementSibling.setAttribute("class", "next");
}
不建议在进行实际开发时在 HTML 代码中使用内联 javascript (onclick="targetClass()") - 讨论 here和 here .使用 Event Listeners
关于javascript - JavaScript 中的 ParentNode 和 previousSibling，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20768925/
26
4
0
我正在尝试使用按钮将 ul 中的 li 在列表中向上移动。我正在使用控制台跟踪某些变量，以查看我的代码是否正常运行。我在观察控制台时发现了一些非常奇怪的东西。 当我单击列表中某个项目的向上箭头时，变量
我想定位第一个在 div 中选择第二个 并使用 previousSibling属性(property)，但它不工作。 test test document.getElementById('p2')
这个问题在这里已经有了答案: previousSibling not working (2 个答案) 关闭 6 年前。 这是演示代码，所以我只想遵循这样的模式:当用户单击按钮时，它会在 h3 标签中
loadHTML(' Title1 Title2 Title
Fiddle here fiddle 的基本解释:当有人开始在单元格中输入内容，然后按 Tab 键移开或取消焦点时，它会在其上方创建一个新行，清空底行，并将焦点移至该新行中的“下一个”输入元素排。它不
有人可以澄清为什么下面的代码返回#text 而不是'li' ？ 第一个 li 的下一个 sibling 不应该是 li 吗？同样，最后一个 li 的前一个兄弟是 li ?
我一直在使用 native DOM 方法(我知道，对吗？)并且我有这样的结构: 我在 上使用 onClick标签，并希望从输入中检索值。在 Chrome/OS X 上，类似于
在YUI3中有什么方法可以得到一个元素的nextSibling和previousSibling吗？就像有: node.get('parentNode'); 其中节点是 DOM 中的某个节点。 最佳答案
我正在看一本学习 JavaScript 的书，它似乎有编码错误，因为我正在看的东西似乎不起作用。这是我拥有的: HTML: Examples of moving around in th
自从我开始学习 JavaScript 以来，我一直在阅读 Tim Wright 的这本名为Learning JavaScript 的书。 在这本书中，我找到了一章关于我们如何在 DOM 树中移动和定位
我不知道我是否知道javascript previousSibling 和previousElementSibling 之间有什么区别。我试过了，但没有找到任何比较或描述这个的问题或文章。也许这是因为
这个问题已经有答案了: How does NextSibling work? (2 个回答) 已关闭 5 年前。 在这个例子中，我想获取 2 个前一个同级的值 但这不行btn.previousSibl
在 Google 跟踪代码管理器中，使用元素、元素类、元素父类来触发代码非常容易。不幸的是，在这种情况下，我想抓取一个仅在同一个 中可用的元素。 因此，当人们单击“删除”链接(class=delete
使用 Chrome，我尝试定位列表中的另一个元素 One Two Three Four Five 所以这有效， document.getElementById("Three").parentNod
我有一个 XMLDataProvider，我需要将一个属性绑定(bind)到前一个同级项的属性。这是一个 XAML 示例: 是否可以仅使用绑定(bind)访问同级项的属性？ 最佳答案 尝试对 Pre
我使用内联 SVG 创建了 map 。每个区域在悬停时亮起(用 CSS 解决)。我想要实现的是，当相应的地区名称悬停时，该地区也应该亮起。 我无法使用 CSS3 实现此目的，因为它没有 previou
如果我有这样的 HTML 代码: This is a test First Cell S
我是一名优秀的程序员,十分优秀！