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>

我需要一种从第一个复选框中选择div的方法。像

这样的东西

 parentNode.parentNode.getElementsByTagName("div");

但是我没有把它弄好 - 那个特定的行选择了一个父母，而不是我需要的那个。

Answer 1

首先，我认为将id放在所需的div上最简单，然后说document.getElementById('divId')。

但是如果你想按自己的方式去做，你可以通过首先检查nodeName属性来确保你的事件真的被输入而不是标签调用，然后检查{{1等等。

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

获取正确的节点

3 个答案: