隐藏的元素是用JavaScript下一个兄弟

Question

我有一个元件从document.getElementById('the_id')抓起。我怎样才能得到它的下一个兄弟和隐藏呢？我试过，但它没有工作：

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

萤火虫误差elem.nextSibling.style is undefined。

Answer 1

这是因为考虑火狐元件节点之间的空白是文本节点（而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

看一看的元遍历API 时，该只有元素节点之间的API移动。这允许以下内容：

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

和因此避免在nextSibling固有的潜在得到非元素节点的问题（例如TextNode保持空白）

Answer 3

  

萤火虫误差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';
    }
}

请作出适当的修正的语法。