Получение правильного узла

Question

У меня есть такая структура в моем доме:

<label>London<input type="checkbox" name="London"></label><br>
<div class="innerpost">
<label>N1 2AB<input type="checkbox" name="N1 2AB"></label><br>
<label>E1 1AB<input type="checkbox" name="E1 1AB"></label><br>
</div>

Мне нужен способ выбрать div из первого флажка. Что-то вроде

 parentNode.parentNode.getElementsByTagName("div");

Но я не совсем понял - эта конкретная строка выбирает все элементы div на одного родителя выше того, который мне нужен.

Answer 1

Во-первых, я думаю, что было бы проще всего просто поставить id на желаемый div, а затем сказать document.getElementById('divId').

Но если вы хотите сделать это по-своему, вы, вероятно, можете отладить это, сначала проверив свойство nodeName, чтобы убедиться, что ваше событие действительно вызывается на входе, а не метке, затем проверив parentNode.nodeName и т. Д. .

Answer 2

Использовать идентификатор было бы проще (как говорит Тим ​​Гудман), но если вы не можете (сгенерированный DOM, не знаете идентификатор?), Я бы перебирал узлы одного брата, а не родителей. Что-то вроде (псевдокод):

var sib = eventNode; // start at the checkbox where the event took place
var found = false;
do {
    sib = sib.nextSibling;
    // see if this is the div with class innerpost
    // it could be a textnode, you can't assume the immediate sibling is the div
    if (sib.tagName == 'DIV' && sib.className.match('innerpost') {
        found = true;
        break;
    }
} while (sib);

Answer 3

Получил решение!

var div = element.parentNode.nextSibling.nextSibling;
while (!div.tagName) div = div.nextSibling;

Вторая строка необходима, потому что IE не считает текстовые узлы, но другие браузеры делают это.

См. Этот jsfiddle для тестирования: http://jsfiddle.net/SLjXW/