使用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

看看Element Traversal API,该API仅在Element节点之间移动.这允许以下内容:

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

从而避免了可能获得非Element节点的nextSibling中固有的问题(例如,TextNode保持空白)