Przenoszenie nextElementSibling/nextSibling

Question

Obecnie piszę akordeon i napotykam na ten sam problem, co opisany w nextSibling difference between IE and FF? - w szczególności różnice między Microsoft nextSibling/nextElementSibling a tym, które zostały zaimplementowane przez wszystkich innych.

Z różnych powodów używanie jquery nie jest opcją. Nie robi się wszystkie moje użytkowników MS uaktualnienia do MSIE9

Obecnie używam następujący kod do obejścia problemu:

// 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=""; 
} 

który wydaje się robić to, co się spodziewać w MSIE6, FF i Chrome - tzn. elementy nthRow TR poniżej początkowego TR są widoczne (poprzednio style.display = "none").

Ale czy może to mieć nieoczekiwane skutki uboczne?

(jestem trochę newbie z javascript;)

Answer 1

nextSibling będzie zobaczyć komentarze kodu HTML, więc należy trzymać je.

Poza tym powinieneś być w porządku, ponieważ nie będziesz mieć żadnych węzłów tekstowych między elementami tr.

Jedyny inny problem, jaki mogłem wymyślić, to: , gdzie nextElementSibling nie został jeszcze wdrożony. Jeśli więc obsługujesz tę przeglądarkę, musisz ręcznie emulować nextElementSibling. (dość pewien, że miał on realizowany w FF3.5 choć.)

Będziesz bezpieczniejsza stworzyć nextElementSibling() funkcję:

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

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

Answer 2

Firefox nextSibling zwraca spacja \ n podczas gdy Internet Explorer nie.

Przed nextElementSibling został wprowadzony, trzeba było zrobić coś takiego:

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

Answer 3

Biorąc pod uwagę wcześniejsze odpowiedzi, jestem obecnie wdrażanie go w ten sposób do przyznać zgodnością różnych przeglądarkach:

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

w ten sposób można uniknąć dO/pętla dla przeglądarek, które wspierają nextElementSibling. Może jestem zbyt przestraszony pętli while w JS :)

Zaletą tego rozwiązania jest 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));