Скрыть следующий родственный элемент с помощью 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

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 3

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

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

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

Answer 4

Посмотрите на Element Traversal API, что API перемещается только между узлами Element. Это позволяет следующее:

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

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