Question

有人可以告诉我如何在div中循环锚标签并找到下一个兄弟吗？

到目前为止，我有这个。

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

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

Answer 1

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);
    }
}

Answer 2

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

JavaScript下一个兄弟姐妹？

2 个答案: