jQueryでparentメソッド等で親要素を取得する方法【現役エンジニアが解説】

PROGRAM

今回は、jQueryでparentメソッド等で親要素を取得する方法について、簡単に解説していきます。

parentメソッド

例えば、以下のHTMLを想定します。

<div id="hoge_parent">
  <div id="hoge_child"></div>
</div>

jQueryではparentメソッドで一つ上の階層の親要素の取得ができます。

$("#hoge_child").parent();

上記のコードでは、hoge_childのidの要素の一つ上の階層の親要素を取得するため、hoge_parentのidの要素を取得できます。

parentsメソッド

以下のHTMLを想定します。

<div id="hoge_grand_parent">
  <div id="hoge_parent">
    <div id="hoge_child"></div>
  </div>
</div>

parentsメソッドでは祖先要素を全て取得できます。

$("#hoge_child").parents();

上記のコードの例では、hoge_childのidの要素の祖先要素全て(hoge_parentやhoge_grand_parentのidの要素等)を取得します。

closestメソッド

引き続き、以下のHTMLを想定します。

<div id="hoge_grand_parent">
  <div id="hoge_parent">
    <div id="hoge_child"></div>
  </div>
</div>

closestメソッドでは祖先要素のうち、引数に指定したものに最も近い要素を取得します。

$("#hoge_child").closest("div");

例えば、上記のコードでは、hoge_childのidの要素に最も近いdiv要素、すなわち、hoge_parentのidの要素を取得します。