Nascondere il fratello successivo di un elemento con Javascript

Question

Ho un elemento afferrato da document.getElementById('the_id'). Come posso ottenere il fratello successivo e nasconderlo? Ho provato questo, ma non ha funzionato:

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

errore Firebug era elem.nextSibling.style is undefined.

Answer 1

perché Firefox considera gli spazi tra nodi di elementi come nodi di testo (mentre IE no) e pertanto l'utilizzo di .nextSibling su un elemento ottiene quel nodo di testo in Firefox.

È utile avere una funzione da utilizzare per ottenere il nodo dell'elemento successivo. Qualcosa di simile

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

allora si può fare

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

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

Answer 2

errore Firebug era elem.nextSibling.style non è definito.

perché nextSibling può essere un testo-nodo o altro tipo di nodo

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

Answer 3

Prova scorrendo i figli di questo elemento usando qualcosa come:

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

Si prega di fare opportune correzioni al sintassi.

Answer 4

Dai uno sguardo allo Element Traversal API, che l'API si sposta solo tra i nodi Element. Questo permette il seguente:

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

E così evita il problema inerente nextSibling potenzialmente ottenere nodi non-Element (ad esempio TextNode spazi possesso)