JavaScript下一个兄弟？

问题描述：

有人能告诉我如何循环通过一个div内的锚标签，并找到下一个兄弟姐妹？JavaScript下一个兄弟？

我有这个到目前为止。

var menu = document.getElementById('menu'); 
var links = menu.getElementsByTagName('a');

如何循环链接？我可以使用.nextSibling来查找下一个兄弟是否是div吗？

你最好使用一些的javascrip库，jQuery的例如 – infinity 2010-10-29 12:02:47

我不能在这种情况下，通常我会的。这只是显示我对这样的图书馆的依赖... – JasonS 2010-10-29 12:04:09

什么的下一个兄弟姐妹？ – 2010-10-29 12:05:26

答

DOM节点的属性nextSibling在所有浏览器中都能正常工作，并且完全符合您的期望。如果没有下一个兄弟，则返回null。

对NodeList（这是getElementsByTagName返回的结果）进行迭代与使用标准for循环遍历数组是相同的。下面将分别找到一个其下一个兄弟是一次迭代的联系，并提醒<div>：

var menu = document.getElementById('menu'); 
var links = menu.getElementsByTagName('a'); 

// Iterate over the links 
for (var i = 0, len = links.length, link; i < len; ++i) { 
    link = links[i]; 
    if (link.nextSibling && link.nextSibling.nodeName == "DIV") { 
     alert("Next sibling is DIV! " + link.innerHTML); 
    } 
}

注意，在非IE浏览器，在HTML元素之间的空白被认为是一个文本节点。在考虑每个链接的下一个兄弟是什么时，您可能想要忽略这些空白节点。下面将做到这一点：

function isWhitespace(node) { 
    return node.nodeType == 3 && /^\s*$/.test(node.data); 
} 

// Iterate over the links 
for (var i = 0, len = links.length, link, next; i < len; ++i) { 
    link = links[i]; 
    next = link.nextSibling; 
    if (next && isWhitespace(next)) { 
     next = next.nextSibling; 
    } 
    if (next && next.nodeName == "DIV") { 
     alert("Next sibling is DIV! " + link.innerHTML); 
    } 
}

该解决方案几乎是正确的。但是，它不考虑A标签Text节点。这里是一个JSFiddle演示：http://www.jsfiddle.net/subhaze/ytCxS/ – subhaze 2010-10-29 14:06:32

@subhaze：嗯，我想你可以说这是不正确的，但是文本节点仍然是一个节点其他节点，即使它只包含空白。真正的问题是，IE不会将空白文本节点计为实际的DOM节点，而所有其他浏览器都会这样做。这绝对值得指出，所以我会修改我的答案。 – 2010-10-29 14:26:10

@subhaze：修改我的答案。我想你只想忽略空白文本节点，而不是任何文本节点（如在你的jsfiddle例子中）。 – 2010-10-29 14:34:03

答

for(var i=0; i<links.length; i++) {  
if (links[i].nextChild.nodeName=="DIV") 
    alert("This is a DIV") 
}

nextChild不是节点的属性：https：//developer.mozilla.org/en/DOM/Node – subhaze 2010-10-29 14:13:08

JavaScript下一个兄弟？

相关推荐