8

javascript で、親の親をターゲットにする簡単な方法はありますか?

親を選択する関数の要素として使用しています。 と の両方をthis.parentNode試しましたが、どちらも直接の親を返すだけです。 「this」を囲むdivを囲むdivに影響を与えようとしています。私は、parentNode の選択を 2 回繰り返す単純なループ ステートメントを使用してなんとか機能させましたが、もっと良い方法があると思います。this.parent.parentNodethis.parentNode.parentNode

4

1 に答える 1

17

this.parentNode.parentNode正解です、あなたは（謝罪して！）あなたがそれを試したテストで間違いを犯したに違いありません。

例：ライブコピー| ソース

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=最も外側
于 2013-03-12T16:44:12.603 に答える