javascript nextElementSibling/nextSibling 的可移植性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6548748/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Portability of nextElementSibling/nextSibling
提问by symcbean
I'm currently writing an accordion and running into the same problem as described in nextSibling difference between IE and FF?- specifically differences between Microsoft's nextSibling / nextElementSibling and that implemented by everyone else.
我目前正在编写手风琴并遇到与IE 和 FF 之间的 nextSibling 差异中描述的相同问题？- 特别是 Microsoft 的 nextSibling / nextElementSibling 与其他人实施的区别。
For various reasons, using jquery is not an option. Nor is getting all my MS users to upgrade to MSIE9
由于各种原因，使用 jquery 不是一种选择。也没有让我所有的 MS 用户升级到 MSIE9
Currently I'm using the following code to work around the problem:
目前我正在使用以下代码来解决这个问题：
// 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="";
}
Which seems to do what I expect in MSIE6, FF and Chrome - i.e. the nthRow TR elements below the initial TR are made visible (previously style.display="none").
这似乎符合我在 MSIE6、FF 和 Chrome 中的预期 - 即初始 TR 下方的 nthRow TR 元素变得可见（以前是 style.display="none"）。
But is this likely to have unexpected side effects?
但这可能会产生意想不到的副作用吗？
(I'm a bit of a newbie with Javascript ;)
（我是 Javascript 的新手；）
回答by user113716
nextSiblingwill see HTML code comments, so be sure to keep them out.
nextSibling会看到 HTML 代码注释，所以一定要把它们排除在外。
Other than that you should be alright since you won't have any text nodes between your trelements.
除此之外，您应该没问题，因为您的tr元素之间不会有任何文本节点。
The only other issue I could think of would be in Firefox 3where nextElementSiblinghadn't yet been implemented. So if you're supporting that browser, you'll need to manually emulate nextElementSibling. (Pretty sure they had it implemented in FF3.5 though.)
唯一的其他问题，我能想到的会是在Firefox 3哪里nextElementSibling尚未实现。因此，如果您支持该浏览器，则需要手动模拟nextElementSibling. （很确定他们已经在 FF3.5 中实现了它。）
You'll be safer to create a nextElementSibling()function:
创建nextElementSibling()函数会更安全：
tr = tr.nextElementSibling || nextElementSibling(tr);
function nextElementSibling( el ) {
do { el = el.nextSibling } while ( el && el.nodeType !== 1 );
return el;
}
回答by LittleSweetSeas
Considering previous answers, I am currently implementing it this way to grant cross-browser compatibilty:
考虑到以前的答案，我目前正在以这种方式实现它以授予跨浏览器兼容性：
function nextElementSibling(el) {
if (el.nextElementSibling) return el.nextElementSibling;
do { el = el.nextSibling } while (el && el.nodeType !== 1);
return el;
}
This way, I can avoid the do/while loop for browsers that support nextElementSibling. Maybe I'm too scared of WHILE loops in JS :)
这样，我可以避免支持 nextElementSibling 的浏览器的 do/while 循环。也许我太害怕 JS 中的 WHILE 循环了:)
One advantage of this solution is recursability:
此解决方案的一个优点是可递归性：
//this will always works:
var e = nextElementSibling(nextElementSibling(this));
//this will crash on IE, as looking for a property of an undefined obj:
var e = this.nextElementSibling.nextElementSibling || nextElementSibling(nextElementSibling(this));
回答by epascarello
Firefox nextSibling returns whitespace \n while Internet Explorer does not.
Firefox nextSibling 返回空格 \n 而 Internet Explorer 不返回。
Before nextElementSibling was introduced, we had to do something like this:
在引入 nextElementSibling 之前，我们必须做这样的事情：
var element2 = document.getElementById("xxx").nextSibling;
while (element2.nodeType !=1)
{
element2 = element2.nextSibling;
}
