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

从而避免了nextSibling中可能获得非Element节点（例如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';
    }
}

请对语法进行适当的更正。

使用Javascript隐藏元素的下一个兄弟

4 个答案: