获取正确的节点

Question

我有这样的结构，我的DOM：

<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> 

我需要一种方法来选择的第一个复选框股利。就像

parentNode.parentNode.getElementsByTagName("div"); 

但我没有得到它的权利 - 特定的行选择一个父母上面我需要的所有div。

Answer 1

首先，我认为这将是最简单的只是把一个ID所需的DIV，然后说document.getElementById('divId')。

但是，如果你想要做你的方式，你也许可以先检查nodeName财产，以确保您的活动真正被称为输入，而不是标签，然后检查parentNode.nodeName调试此等

Answer 2

得到了解决方案！

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

第二行是需要的，因为IE不计算文本节点，但是其他浏览器可以。

测试请参阅本的jsfiddle：http://jsfiddle.net/SLjXW/

Answer 3

使用ID将是最简单的（正如Tim Goodman所说的），但是如果你不能（生成DOM，不知道ID）我会通过兄弟节点而不是父母循环。 沿东西的（伪代码）行：

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