nextElementSibling/nextSiblingの移植性

Question

私は現在、アコーディオンを作成しており、nextSibling difference between IE and FF?に記載されている問題と同じ問題、特にMicrosoftのnextSibling/nextElementSiblingとほかの人たちによって実装された問題との違いに遭遇しています。

さまざまな理由から、jqueryの使用はオプションではありません。 NORは、現在、私はこの問題を回避するには、次のコードを使用していMSIE9

にアップグレードするすべての私のMSのユーザーを取得している：

// 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とChromeに期待するものを行うに思われます - すなわち、最初のTR以下のnthRow TR要素が可視になります（以前はstyle.display = "none"）。

これは予期しない副作用を持つ可能性がありますか？

（私はJavaScriptで初心者のビットんだ;）Internet Explorerがそうではない

Answer 1

nextSibling HTMLコードのコメントを参照してくださいので、それらを保つようにしてください次のようになります。nextElementSiblingが導入される前

、我々はこのような何かをしなければなりませんでした。

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; 
} 

Answer 2

FirefoxのnextSiblingは空白の\ nを返します。

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

Answer 3

は、以前の答えを考えると、私は現在、このようにそれを実装していますクロスブラウザcompatibiltyを付与します。

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

この方法で、私は、/ DOを避けることができnextElementSiblingをサポートするブラウザ用whileループ。 たぶん私は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));