在javascript中,有没有一种简单的方法可以定位父对象的父对象?

我将this.parentNode用作选择父项的函数的元素,并且尝试了this.parent.parentNodethis.parentNode.parentNode,但都只是返回了直接父项。
我正在尝试影响围绕“this”的div的div。我确实使用一个简单的循环语句使它正常工作,该语句重复了两次parentNode选择,但是我认为有更好的方法。

最佳答案

this.parentNode.parentNode是正确的,您必须(在此道歉!)在尝试它的测试中犯了一个错误。

示例:Live Copy | Source

HTML:

<div id="outermost">Outermost
  <div id="inner1">Inner 1
    <div id="inner2">Inner 2</div>
  </div>
</div>

JavaScript:
var inner2 = document.getElementById("inner2");

display("inner2.id = " + inner2.id);
display("inner2.parentNode.id = " + inner2.parentNode.id);
display("inner2.parentNode.parentNode.id = " + inner2.parentNode.parentNode.id);

display("Try clicking the blue 'inner2' above");

inner2.onclick = function(e) {
  display("Click: this.id = " + this.id);
  if (this.parentNode) {
    display("Click: this.parentNode.id = " + this.parentNode.id);
    if (this.parentNode.parentNode) {
      display("Click: this.parentNode.parentNode.id = " + this.parentNode.parentNode.id);
    }
  }
};

function display(msg) {
  var p = document.createElement('p');
  p.innerHTML = String(msg);
  document.body.appendChild(p);
}

输出(假设按一下即可单击):

inner2.id = inner2
inner2.parentNode.id = inner1
inner2.parentNode.parentNode.id =最外层
尝试点击上方的蓝色“inner2”
点击:e.target.id = inner2
点击:e.target.parentNode.id = inner1
点击:e.target.parentNode.parentNode.id =最外层

关于 parent 的JavaScript parent ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/15367111/

10-11 14:11