Ocultar el siguiente hermano de un elemento con Javascript

Question

Tengo un elemento tomado de document.getElementById('the_id'). ¿Cómo puedo obtener su próximo hermano y esconderlo? He intentado esto, pero no funcionó:

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

error Firebug era elem.nextSibling.style is undefined.

Answer 1

es porque Firefox considera que los espacios en blanco entre los nodos de elementos son nodos de texto (mientras que IE no) y por lo tanto usando .nextSibling en un elemento obtiene ese nodo de texto en Firefox.

Es útil tener una función para usar para obtener el siguiente nodo de elemento. Algo como esto

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

entonces usted puede hacer

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

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

Answer 2

error Firebug era elem.nextSibling.style no está definido.

porque nextSibling puede ser un texto nodos u otro tipo de nodo

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

Answer 3

Trate bucle a través de los hijos de este elemento usando algo como:

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

Por favor haga las correcciones pertinentes a la sintaxis.

Answer 4

Eche un vistazo a Element Traversal API, esa API se mueve solo entre los nodos Element. Esto permite lo siguiente:

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

Y así se evita el problema inherente a nextSibling de conseguir potencialmente nodos que no son de elemento (por ejemplo textNode espacios en blanco sosteniendo)