javascript - 使用 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';

从而避免了 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';
    }
}

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