JavaScript следующий брат?

Question

Может ли кто-нибудь показать мне, как перебрать теги привязки внутри div и найти следующего брата?

Пока у меня есть это.

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

Как мне пройти по ссылкам? Могу ли я использовать .nextSibling, чтобы определить, является ли следующий брат соседом?

Answer 1

Свойство nextSibling узлов DOM прекрасно работает во всех браузерах и выполняет именно то, что вы ожидаете. Если следующего родного брата нет, он возвращает 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")
}