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

【问题标题】：Hide an element's next sibling with Javascript使用 Javascript 隐藏元素的下一个兄弟
【发布时间】：2010-10-26 11:41:24
【问题描述】：

我从document.getElementById('the_id') 抓取了一个元素。我怎样才能得到它的下一个兄弟并隐藏它？我试过了，但没有用：

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

Firebug 错误为 elem.nextSibling.style is undefined。

【问题讨论】：

标签： javascript element hide siblings

【解决方案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';

【讨论】：

但elem 仍然可能为空。
不，它没有。它只是保证当elem 为“不正确”或elem.nodeType == 1 时不会访问nextSibling。但是如果没有这样的元素，elem 就只是最后一个兄弟节点，不管它是什么类型。
这里有一个例子： var elem = document.createElement("div"); elem.appendChild(document.createTextNode("foo")); elem.appendChild(document.createTextNode("bar"));警报（下一个（elem.firstChild）=== null）； // “真”
只是想确认这是另一个答案stackoverflow.com/a/15322350/4119808，但不是重点。有什么问题吗？

【解决方案2】：

查看Element Traversal API，该API 仅在元素节点之间移动。这允许以下操作：

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

从而避免了 nextSibling 中固有的潜在获取非元素节点的问题（例如 TextNode 持有空白）

【讨论】：

TY TY TY TY 添加这个答案！
我认为这是最好和最简单的方法，我不明白为什么人们不专注..

【解决方案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';

【讨论】：

+1 用于在访问style 属性之前检查elem 是否不为空。

【解决方案4】：

尝试使用类似这样的方式遍历该元素的子元素：

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

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

【讨论】：