Скрыть следующий брат элемента с Javascript

Question

У меня есть элемент, взятый из document.getElementById('the_id'). Как я могу получить его следующего родного брата и скрыть это? Я попробовал это, но это не сработало:

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

Ошибка Firebug была elem.nextSibling.style is undefined.

Answer 1

это потому, что Firefox рассматривает пробел между узлами элемента как текстовые узлы (в то время как IE не делает), и поэтому использование .nextSibling для элемента получает этот текстовый узел в Firefox.

Полезно иметь функцию для получения следующего узла элемента. Как то так

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

тогда вы можете сделать

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

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

Answer 2

Взгляните на API обхода элемента , который API перемещается только между узлами элемента. Это позволяет следующее:

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

И, таким образом, избегает проблемы, присущей nextSibling потенциальному получению неэлементных узлов (например, TextNode, содержащий пробелы)

Answer 3

Ошибка Firebug была elem.nextSibling.style не определена.

потому что nextSibling может быть текстовым узлом или другим типом узла

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

Answer 4

Попробуйте перебрать дочерние элементы этого элемента, используя что-то вроде:

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

Пожалуйста, внесите соответствующие исправления в синтаксис.