24

私は現在アコーディオンを書いていて、次の説明で説明されているのと同じ問題に遭遇しています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="";
}

これは、MSIE6、FF、およびChromeで期待することを実行しているようです。つまり、最初のTRの下にあるnthRow TR要素が表示されます（以前はstyle.display = "none"）。

しかし、これは予期しない副作用をもたらす可能性がありますか？

（私はJavascriptの初心者です;）

4

3 に答える 3

30

nextSiblingHTMLコードのコメントが表示されるので、それらを除外してください。

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-01T14:06:03.977 に答える
9

以前の回答を考慮して、私は現在、クロスブラウザーの互換性を付与するためにこの方法で実装しています。

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

このようにして、nextElementSiblingをサポートするブラウザーのdo/whileループを回避できます。たぶん私はJSのWHILEループが怖すぎます:)

このソリューションの利点の1つは、再帰性です。

//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-15T19:39:51.153 に答える
4

FirefoxnextSiblingは空白を返します\nInternetExplorerは返しません。

nextElementSiblingが導入される前は、次のようなことを行う必要がありました。

var element2 = document.getElementById("xxx").nextSibling;
while (element2.nodeType !=1)
{
          element2 = element2.nextSibling;
}
于 2011-07-01T14:03:15.383 に答える