我正在写一部手风琴并遇到与IE和FF之间的下一个兄弟差异所描述的相同的问题? - 特别是Microsoft的nextSibling/nextElementSibling与其他人实现的差异.
由于各种原因,使用jquery不是一种选择.也没有让我所有的MS用户升级到MSIE9
目前我正在使用以下代码来解决此问题:
// tr is a TR doc element at entry....
while (nthRow--) {
// for Chrome, FF tr=tr.nextElementSibling; for MSIE...tr=tr.nextSibling;
tr=tr.nextElementSibling ? tr.nextElementSibling : tr=tr.nextSibling;
if (!tr || tr.nodeName != "TR") {
break;
}
tr.style.display="";
}
Run Code Online (Sandbox Code Playgroud)
这似乎做什么,我期待在MSIE6,FF和铬 - 即初始TR低于nthRow TR元素可见(以前的style.display ="无").
但这可能会产生意想不到的副作用吗?
(我是Javascript的新手;)
<html>
<body>
<script language="JavaScript">
function function1() {
var m = document.getElementById("myNodeOne").nextSibling;
m.innerHTML = "asdfsdf";
}
</script>
<p>This PARAGRAPH has two nodes,
<b id="myNodeOne">Node One</b>, and
<b id="myNodeTwo">Node Two</b>.
</p>
<p></p>
<button onclick="function1();">Node One has a Next Sibling</button>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
这应该在第二段标签中打印"asdfsdf".但它不起作用.
寻找方法或图书馆这样的事情:
GameObject nextBrotherNode= gameObject.transform.getNextSibling();
Run Code Online (Sandbox Code Playgroud) 所以自从我开始学习JavaScript的我一直在读这本书叫学习JavaScript由蒂姆·赖特。
在这本书中,我找到了关于如何移动和定位DOM树中元素的章节,其中之一是利用以兄弟姐妹为目标的属性,而在本书中进行练习时,我根本无法使以下语句起作用:
<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>
<script>
//Should add "next" class attribute to the "Contact Us" li tag.
document.getElementById("about").parentNode.nextSibling.setAttribute("class", "next");
</script>
Run Code Online (Sandbox Code Playgroud)
快速浏览此代码后,我想知道您中是否有经验更丰富的开发人员可以帮助我,并向我解释为什么此方法无法正常工作。我感到困惑是因为我不知道我做错了什么还是关于这些属性的文章拼写错误。
无论如何,感谢您的时间和提前的帮助!
干杯!
阿尔梅达
我有两个div元素,第一个 div 中有一个按钮,如下所示。
<div class='my-class'>
<div class='other-div'>
<button onClick="nextDiv(this);">Click</button>
</div>
</div>
<div class='my-class'>
</div>
Run Code Online (Sandbox Code Playgroud)
下面是我的 JavaScript 代码。
function nextDiv(element) {
element.closest('.my-class').style.display = 'none';
element.closest('.my-class').nextSibling.style.display = 'block';
}
Run Code Online (Sandbox Code Playgroud)
当我点击按钮时,为什么我可以隐藏第一个元素,但无法显示下一个带有 class 的 div 元素my-class。相反,我收到以下错误:
Uncaught TypeError: Cannot set property 'display' of undefined
Run Code Online (Sandbox Code Playgroud)
似乎我无法my-class使用 nextSibling 属性选择类的下一个 div 元素。我做错了什么?
我有以下DOM结构:
<label>
<span class="tt">
<a href="#" class="editable">Hello1</a>
<a href="#" class="editable">Hello2</a>
<a href="#" class="editable">Hello3</a>
<a href="#" class="editable">Hello4</a>
</span>
<a href="#" class="editable">Hello5</a>
</label>
Run Code Online (Sandbox Code Playgroud)
当我点击锚点时Hello3,我需要得到Hello4它的工作绝对正常.但如果我点击链接Hello4,我需要得到Hello5哪些我没有得到正确的.
我正在使用以下代码:
$(document).on('click','.editable',function(){
console.log($(this).nextAll('.editable').first());
});
Run Code Online (Sandbox Code Playgroud)
我真正想要的是editable当我点击一个锚时,让下一个元素在label标签中有类.
我想在CSS单击元素后立即将类名添加到元素的下一个兄弟元素以获得简单的显示/隐藏效果
我有以下 html 输出,但我没有元素 ID。
<div class="news-message">
<div class="message-head"> Headline of Message 1 </div>
<div class="message-content"> Here comes the content of message 1 </div>
</div>
<div class="news-message">
<div class="message-head"> Headline of Message 2 </div>
<div class="message-content"> Here comes the content of message 2 </div>
</div>
<div class="news-message">
<div class="message-head"> Headline of Message 3 </div>
<div class="message-content"> Here comes the content of message 3 </div>
</div>
Run Code Online (Sandbox Code Playgroud)
现在我想隐藏消息内容并只显示标题(使用 很容易实现display: none)。
只要我点击标题,我就希望显示该特定消息的内容。
所以我的想法是通过单击消息头将一个CSS“可见”类添加到DIV“消息内容”中,然后再单击一次将其删除。
所以我在“pm-head”元素和以下javascript中添加了一个“onClick="changeClass()”
function …Run Code Online (Sandbox Code Playgroud)