WEBデザイン・プログラミング関連の
情報発信を手掛ける STAND4U

HOME > WEB制作 > javascript > jQuery「.parent() / .parents() / .closest()」で親要素を取得する方法

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

[景品表示法に基づく表記] 本コンテンツにはプロモーションが含まれています。

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

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

.parent()の機能とは?

.parent()の機能

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

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

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

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

.parent()の構文

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

$("セレクタ").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を取得する事ができる。

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

1階層ではなく、2階層、3階層といった「先祖要素」を取得したい場合は、単純に.でつなぐメソッドチェーンで.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()は、「指定要素より上の親要素の中から直近の特定の親要素1つだけ取得する」事ができる。

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

つまり.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というポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが2ヶ月程度でサクッと学べたので逆に経済的だった!(実際に私がオンラインスクールを受講して体感

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

スクール選びのポイント
  • 学習スタイルが自分に合っているか?
  • 低価格でコスパの良い学習料金か?
  • 講師に質問しやすい環境か?
  • 無料体験できるスクールか?

数あるスクールの中から、実際に受講してわかった事や現役プロならでは目線で厳選・比較したこちらの記事「現役プロ比較!短期 「WEBデザインスクール12校」おすすめランキング!」を参考に自分に合ったスクールを探そう↓

jQuery「.parent() / .parents() / .closest()」で親要素を取得する方法のまとめ

以上が、jQueryで「.parent() / .parents() / .closest()」で親要素を取得する」方法でした。

その他のjQueryメソッドについて確認したい方は、jQueryメソッドを一覧で解説したこちらの記事を確認しておこう!


※当記事の掲載内容は執筆現在の個人の見解・調査によるもので、動作・サービス等を保証するものではありません。最新情報は各公式サイトでご確認頂き、購入・契約・データ作成等はご自身の判断・責任でお願いします。 免責事項

関連記事

この記事を書いた人

編集長

WEBデザイン・グラフィックデザイン歴:約18年、HTMLコーディング、jquery、wordpress、イラストなど本業とし、WEBデザインコンサル・プログラミング・ライティング等にも勤しんでいます

プロフィールはこちら

Twitter @stand_4u_ をフォロー

新着記事