有人告诉我如何循环通过div中的锚标签,找到下一个兄弟姐妹？
我到现在为止
var menu = document.getElementById('menu');
var links = menu.getElementsByTagName('a');
如何循环链接？我可以使用.nextSibling来查找下一个兄弟姐妹是否是一个div？
解决方法
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,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);
}
}
