Ukryj kolejne rodzeństwo elementu z Javascriptem

Question

Mam element pobrany z document.getElementById('the_id'). Jak mogę zdobyć następne rodzeństwo i ukryć je? Próbowałem, ale to nie działało:

elem.nextSibling.style.display = 'none'; 

Błąd Firebug był elem.nextSibling.style is undefined.

Answer 1

dzieje się tak dlatego, że Firefox uznaje białe znaki między węzłami elementów za węzły tekstowe (podczas gdy IE nie), a zatem użycie .nextSibling na elemencie pobiera ten węzeł tekstowy w Firefoksie.

Przydaje się funkcja, której można użyć do uzyskania następnego węzła elementu. Coś takiego

/* 
    Credit to John Resig for this function 
    taken from Pro JavaScript techniques 
*/ 
function next(elem) { 
    do { 
     elem = elem.nextSibling; 
    } while (elem && elem.nodeType !== 1); 
    return elem;   
} 

wtedy można zrobić

var elem = document.getElementById('the_id'); 
var nextElem = next(elem); 

if (nextElem) 
    nextElem.style.display = 'none'; 

Answer 2

błąd Firebug był elem.nextSibling.style jest niezdefiniowany.

ponieważ nextSibling może być tekst węzła lub inny typ węzła

do { 
    elem = elem.nextSibling; 
} while(element && elem.nodeType !== 1); // 1 == Node.ELEMENT_NODE 
if(elem) elem.style.display = 'none'; 

Answer 3

Spróbuj zapętlenie przez dzieci tego elementu przy użyciu coś jak:

var i=0; 
(foreach child in elem) 
{ 
    if (i==0) 
    { 
    document.getElementByID(child.id).style.display='none'; 
    } 
} 

Należy dokonać odpowiednich korekt do składnia.

Answer 4

Spójrz na Element Traversal API, że API porusza się tylko między węzłami elementu. Pozwala to następujące:

elem.nextElementSibling.style.display = 'none'; 

I w ten sposób unika się problemu wrodzoną w nextSibling potencjalnie coraz węzły non-element (np TextNode gospodarstwa spacje)