jQueryで親要素を取得する方法3選【parent()・parents()・closest()の違い】

みなさんこんにちは!

今回の記事は、

悩みを抱えた人
・jQueryを使って親要素を取得する方法が知りたい
・祖先要素を取得するにはどうしたらいいの?
・parent()、parents()、closest()の違いってなに?

というお悩みを解決する記事になっています。


この記事の内容

・jQueryで親要素を取得する方法【3つご紹介します】
・parent()、parents()、closest()メソッドの使い方とそれぞれの違い


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。

jQueryで親要素を取得する方法

jQueryで子要素を取得するには、以下の4種類の方法があります。

  • parent()メソッドを使って取得する
  • parents()メソッドを使って取得する
  • closest()メソッドを使って取得する

それぞれ順を追ってご紹介していきます。

parent()メソッドを使って親要素を取得する方法

まずご紹介するのはparent()メソッドです。

jQueryで親要素を取得する方法として最もシンプルかつわかりやすいのがこのparent()メソッドです。

その名前からも想像できる通り、parent()メソッドを使用することでレシーバであるHTML要素の1つ上の階層の親要素を取得することができます。

実装コード

<div class="parent">
  <p id="child">子要素</p>
</div>

<script>
console.log($("#child").parent())
</script>

出力結果

=> [div.parent]

このように、取得したHTML要素の親要素が簡単に取得できます。

parent()メソッドで祖先要素を取得する方法

このparent()メソッド、先ほどは「1つ上の階層の親要素を取得する」とご紹介しましたが、理論上はそれ以上の階層の要素(祖先要素)を取得することも可能です。

jQueryではメソッドチェーンが可能ですので、このparent()メソッドをどんどん繋げていけば実現できます

実装コード

<div class="parent1">
  <div class="parent2">
    <div class="parent3">
      <p id="child">子要素</p>
    </div>
  </div>
</div>

<script>
console.log($("#child").parent().parent().parent())
</script>

出力結果

=> [div.parent1]

このように、子要素の親の親の親を取得するには、parent()メソッドを三つ重ねれば大丈夫です。

parent()メソッドで祖先要素を取得することの問題点

parent()メソッドのチェーンは、ご紹介こそしましたが、見た目的にも美しくなく、また、運用面でも問題を抱えているので、あまりおすすめはできません。

実際、先ほどのHTML要素の例に1つdiv要素が加えられた場合を考えてみましょう。

実装コード

<div class="parent1">
  <div class="new-parent">
    <div class="parent2">
      <div class="parent3">
        <p id="child">子要素</p>
      </div>
     </div>
  </div>
</div>

<script>
console.log($("#child").parent().parent().parent())
</script>

上記の場合、出力結果はどうなるでしょうか?

そう、以下の通り、「parent1」ではなく、「new-parent」が取得されてしまいますよね。

出力結果

=> [div.new-parent]

「jQuery側を修正してあげればいいんじゃないの?」と考える方もいらっしゃるかと思いますが、HTML要素を修正するたびにjQuery側も修正していくというのは、運用コストが高すぎますよね。

そのため、祖先要素を取得するためには、以降でご紹介するparents()メソッドやclosest()メソッドを使用するようにしましょう。

parent()メソッドとfind()メソッドを組み合わせる

parent()メソッドとfind()メソッドを組み合わせて、同じ親要素に所属するタグを取得することも可能です。

実装コード

<div class="parent">
  <p id="child1">子要素</p>
  <span id="child2">子要素</span>
</div>

<script>
console.log($("#child2").parent().find("p"))
</script>

出力結果

=> [p#child1]

ただし、結局は兄弟要素を取得することになるので、その場合にはnext()prev()などのメソッドを使用するようにしたいですね。

あわせて読みたい

今回の記事は、 jQueryを使って全ての兄弟要素を取得したいjQueryを使って一部の兄弟要素を取得したいnext() / nextAll()、prev() / prevAll()、siblings()メソッドの使い分け方を知りた[…]

プログラミングイメージ

parents()メソッドを使って親要素を取得する方法

続いてご紹介するのはparents()メソッドです。

先ほどのparent()メソッドが複数形になっている通り、このparents()メソッドでは、レシーバであるHTML要素よりも階層が上の要素を全て取得してくれます。

「全てってどこまでなの?」と思われる方もいらっしゃるかと思いますが、本当に「全て」です。

一番上の階層であるhtmlまで取得してしまいます。

実装コード

<html>
  <body>
    <div class="parent1">
      <div class="parent2">
        <div class="parent3">
          <p id="child">子要素</p>
        </div>
      </div>
    </div>
  </body>
</html>

<script>
console.log($("#child").parents())
</script>

出力結果

=> [div.parent3, div.parent2, div.parent1, body, html]

このように、こちら側で定義したHTML要素(parent1、parent2、parent3)だけでなく、body要素html要素まで取得されているのがお分かり頂けるかと思います。

parents()メソッドを使って特定の祖先要素を取得する方法

このparents()メソッドですが、そのまま使用すると先ほどのように全ての祖先要素を取得してしまうのですが、引数にセレクタを指定することで特定の祖先要素を取得することが可能です。

実装コード

<div class="parent1">
  <div class="parent2">
    <div class="parent3">
      <p id="child">子要素</p>
    </div>
  </div>
</div>

<script>
console.log($("#child").parents(.parent2))
</script>

出力結果

=> [div.parent2]

このように、parents()メソッドの引数にidやclass、タグ名を指定することで特定の祖先要素を取得することができます

closest()メソッドを使って親要素を取得する方法

最後にご紹介するのはclosest()メソッドです。

closest()メソッドを使うと、自分より階層が上の要素のうち、引数に指定したセレクタに合致した最初の要素を取得することができます。
(※引数を指定しないと何も返ってこないので、その点はご注意ください。)

実装コード

<div class="parent" id="parent1">
  <div class="parent" id="parent2">
    <div>
      <p id="child">子要素</p>
    </div>
  </div>
</div>

<script>
console.log($("#child").closest(.parent))
</script>

出力結果

=> [div#parent2.parent]

このように、指定したHTML要素の祖先要素のうち、parentというclassを持つ要素を検索し、最初に合致した要素のみを返しているのがお分かりいただけるかと思います。

これに対して、parents()メソッドを使った場合には、以下の通り、合致する全ての要素を返します。

出力結果

=> [div#parent2.parent, div#parent1.parent]

jQueryで親要素を取得する方法の使い分け

最後にそれぞれの方法の使い分けについてまとめておきます。

ケース方法
親要素のみ取得するparent()メソッド
祖先要素を取得するparents()メソッド
最も近い祖先要素のみを取得するclosest()メソッド

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまで、jQueryを使ってHTMLの親要素を取得する方法について解説してきましたがいかがでしたか?

3つのメソッドがあるため混乱してしまいがちですが、こうして体系的に整理するとそれほどややこしくはないことがお分かりいただけたかと思います。

これを機会にぜひ覚えておいてくださいね。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。

あわせて読みたい

みなさんこんにちは! 今回の記事は、 悩みを抱えた人 ・jQueryを使って子要素を取得する方法が知りたい・children()とfind()の違いってなに?・contents()ってなんのために使うの? という[…]

jQueryで子要素を取得する方法4選【children()とfind()は違います】