使用Javascript隐藏元素的下一个兄弟 [英] Hide an element's next sibling with Javascript

问题描述

我从 document.getElementById（'the_id'）中获取了一个元素。我怎样才能得到它的下一个兄弟并隐藏它？我尝试了这个但是没有用：

I have an element grabbed from document.getElementById('the_id'). How can I get its next sibling and hide it? I tried this but it didn't work:

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

Firebug错误 elem.nextSibling.style未定义。

Firebug error was elem.nextSibling.style is undefined.

推荐答案

这是因为Firefox认为元素节点之间的空白是文本节点（而IE不是）因此使用元素上的 .nextSibling 在Firefox中获取该文本节点。

it's because Firefox considers the whitespace between element nodes to be text nodes (whereas IE does not) and therefore using .nextSibling on an element gets that text node in Firefox.

有一个函数可用于获取下一个元素节点。这样的东西

It's useful to have a function to use to get the next element node. Something like this

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

这篇关于使用Javascript隐藏元素的下一个兄弟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！