jQuery｢.parent() / .parents() / .closest()｣で親要素を取得する方法

2020年7月6日

jQueryの「.parent() / .parents() / .closest()」は、いずれも親要素を取得する事ができるメソッド

今回は、jQueryの「.parent() / .parents() / .closest()」について、それぞれの使い方をサンプルを交えて解説しよう。

.parent()の機能とは？

.parent()の機能

.parent()は、「指定要素の１階層上の親要素を取得する」事ができる。

たとえば次のようなHTMLがあったとする

HTML

<div class="wrapper">
  <ul id="navi">
    <li class="target">ターゲット</li>
  </ul> 
</div>

このHTMLにおいて、ターゲットとして$(".target")を指定してparent()メソッドを使った場合、その１階層上の親要素であるul#naviが取得される事になる。

.parent()の構文

ターゲットとなる要素をセレクタとして記述し、その１階層上の親要素を選択する書き方。

$("セレクタ").parent();

.parent()の使い所

.parent()は「特定の要素の親要素」を取得するだけでなく.find()を使って、次の例のように取得した親要素の子要素、つまり「特定の要素から見た兄弟要素」を取得するという使い方も可能だ。

HTML

<div class="wrapper">
 <h2>見出し</h2>
  <ul id="navi">
    <li class="target">ターゲット</li>
  </ul> 
</div>

jQuery

$("#navi").parent().find("h2");

この例のように#naviの親要素を取得し.find()を使ってその子要素であり#naviの兄弟要素であるh2を取得する事ができる。

複数階層上の「先祖要素」を取得する場合

１階層ではなく、２階層、３階層といった「先祖要素」を取得したい場合は、単純に.でつなぐメソッドチェーンで.parent().parent()という感じで必要な階層の数だけ追加すれば良い。

$("セレクタ").parent().parent();

例えば次のようなHTMLがあった場合

HTML

<div class="outer">
 <div class="wrapper">
   <ul id="navi">
     <li class="target">ターゲット</li>
   </ul> 
 </div>
</div>

jQuery

$(".target").parent().parent().parent();

とする事で3階層上のdiv.outerが取得される事になる。

このように.parent()を複数書けば良いのだが、あまり長く繋げるとソースコードが見づらくなる上、サイトのリニューアルや調整で、階層が変わった場合に機能しなくなるので注意が必要。

指定要素より上の親要素すべて（先祖要素）を取得する「.parents()」

類似メソッドである.parents()は.parent()に複数形のsがついたメソッド名で、指定要素より上の親要素すべての要素を取得する事ができる。

.parents()の機能

.parents()は、「指定要素より上のすべて親要素を取得する」事ができる。

またparents("セレクタ")のように引数にセレクタを指定する事で、取得条件を指定する事も可能。

次のように「前項の例と同じ」HTMLがあった場合

HTML

<div class="outer">
 <div class="wrapper">
   <ul id="navi">
     <li class="target">ターゲット</li>
   </ul> 
 </div>
</div>

jQuery

$(".target").parents(.outer);

とする事で、先程と同じ3階層上のdiv.outerを、より短いコードで取得する事ができる。

この例だけ見ると、IDがわかっているなら、わざわざ親要素からたどって取得する必要が感じられないが、#naviを子要素にもつ.outerだけを取得したい場合などには有効だ（それ以外の.outerは取得したくない）。

指定の要素から見た直近の（特定の）親要素を指定する「closest()」

次は、指定の要素から見た、直近の特定の親要素を取得する.closest()というメソッド。

.closest()の機能

.closest()は、「指定要素より上の親要素の中から直近の特定の親要素を１つだけ取得する」事ができる。

.parent()との違いは１階層ではなく、複数階層までさかのぼる点であり、.parents()との違いは、指定要素から見て一番近い特定の要素を１つだけ取得するという点だ。

つまり.closest()は.closest("セレクタ")のように必ず引数にセレクタを指定する必要があり、逆に言うと、特定の親要素を取得する事に特化したメソッドと言える。

HTML

<section class="wrapper">
 <div class="wrapper">
   <ul id="navi">
     <li class="target">ターゲット</li>
   </ul> 
 </div>
</section>

jQuery

$(".target").closest(.wrapper);

この結果.targetにもっとも近いdiv.wrapperだけが取得されsection.wrapperは取得されない点がポイントだ。

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

スクール選びのポイント