nextElementSibling/nextSibling的可移植性

我目前正在编写一个手风琴，并遇到nextSibling difference between IE and FF?中描述的相同问题 - 特别是微软的nextSibling/nextElementSibling和其他人实现的问题之间的差异。nextElementSibling/nextSibling的可移植性

由于各种原因，使用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=""; 
}

这似乎做什么，我期待在MSIE6，FF和铬 - 即在初始TR之下的nthR TR元素变得可见（先前的style.display =“none”）。

但是，这可能会有意想不到的副作用？

（我有点用javascript一个新手的;）

来源

2011-07-01 symcbean

nextSibling会看到HTML代码中的注释，所以一定要保持他们。

除此之外，您应该没问题，因为您的tr元素之间没有任何文本节点。

我能想到的唯一的其他问题是Firefox 3，其中nextElementSibling尚未实施。因此，如果您支持该浏览器，则需要手动模拟nextElementSibling。 （相当肯定他们有它FF3.5实施虽然）。

你会更安全创建nextElementSibling()功能：

tr = tr.nextElementSibling || nextElementSibling(tr); 

function nextElementSibling(el) { 
    do { el = el.nextSibling } while (el && el.nodeType !== 1); 
    return el; 
}

来源

2011-07-01 14:06:03 user113716

是 - 这似乎更好的解决方案 - 实际上是相同的epascarello的答案，但是这是一个有点更强大 – symcbean

...只有当它不是（el && el.nodeType！== 1）; ？ – symcbean

@symcbean：是的。固定。接得好。：O） – user113716

火狐nextSibling返回空白时\ n Internet Explorer不。

nextElementSibling介绍之前，我们不得不做这样的事情：

var element2 = document.getElementById("xxx").nextSibling; 
while (element2.nodeType !=1) 
{ 
      element2 = element2.nextSibling; 
}

来源

2011-07-01 14:03:15 epascarello

考虑到以前的答案，我目前实施这种方式来授予跨浏览器了兼容性：

function nextElementSibling(el) { 
    if (el.nextElementSibling) return el.nextElementSibling; 
    do { el = el.nextSibling } while (el && el.nodeType !== 1); 
    return el; 
}

这样一来，我可以避开DO/while循环用于支持nextElementSibling浏览器。也许我太害怕while循环在JS :)

一个优势的该溶液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));

来源

2012-11-15 19:39:51 LittleSweetSeas

nextElementSibling/nextSibling的可移植性

回答

相关问题