【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

jQueryで親要素・祖先要素を取得する方法【parent(),parents(),closest()】

本記事では、jQueryでparent()・parents()・closest()を使って親要素・祖先要素を取得する方法について解説しています。

JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
総合評価
( 5 )
メリット
  • 誰でも分かるように嚙み砕いて説明してくれる
  • アニメーションの知識が深く学べる
  • 1つのWebサイトを作りながら学べる
楽天ブックス
¥2,794 (2024/10/06 13:34時点 | 楽天市場調べ)
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次

サンプルコード

以降の解説では、下記のHTMLを使用します。自分のパソコンでコードを実行させながら確認したい人は下記のコードをコピペしてお使いください。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <div class="content">
      <div class="inner">
        <div class="content">
          <p id="text">テキスト</p>
        </div>
      </div>
    </div>
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>
  </body>
</html>

親要素を取得する

親要素を取得するにはparent()メソッドを使います。注意点として、parent()メソッドは一つ上の階層である親要素しか取得することができないため、祖先要素を取得することができません。

parent()メソッドの使い方は以下のとおりです。

$("要素名").parent();

サンプルコードを使った実行結果は以下のとおりです。

$("#text").parent();
// 実行結果:S.fn.init [div.content, prevObject: S.fn.init(1)]

#textの一つ上にあるdivタグが取得できていることが確認できます。

祖先要素を取得する

親要素よりも更に上の位置にある祖先要素を取得するにはparents()メソッドまたはclosest()メソッドを使います。

この2つの違いは要素を取得できる数にあります。parents()メソッドでは該当する全ての要素を取得できるのに対し、closest()メソッドでは該当する要素が複数あった場合、指定要素に一番近い要素のみを取得します。

parents()メソッドとclosest()メソッドは()内にセレクタを指定することができるため、親要素の中で特定のクラスが付与されているものや条件に一致している要素だけ取得したい時はセレクタを指定しましょう。また、祖先要素の中には親要素も取得対象となります。

parents()メソッドとclosest()メソッドの使い方は以下のとおりです。

/* ↓親〜祖先要素を全て取得 */
$("要素名").parents();

/* ↓親〜祖先要素の中で特定の要素だけ取得 */
$("要素名").parents("セレクタ");

/* ↓親〜祖先要素の中で指定したセレクタに一致した一番近い要素だけ取得 */
$("要素名").closest("セレクタ");

サンプルコードを使った実行結果は以下のとおりです。

$("#text").parents();
// 実行結果:S.fn.init(5) [div.content, div.inner, div.content, body, html, prevObject: S.fn.init(1)]

$("#text").parents(".content");
// 実行結果:S.fn.init(2) [div.content, div.content, prevObject: S.fn.init(1)]

$("#text").closest(".content");
// 実行結果:S.fn.init [div.content, prevObject: S.fn.init(1)]

$(“#text”).parents();では、#textの親要素以上が全て取得されていることが確認できます。

$(“#text”).parents(“.content”);では、#textの親要素以上にクラスcontentが付与されている要素のみが取得されていることが確認できます。

$(“#text”).closest(“.content”);では、$(“#text”).parents(“.content”);と取得したい要素は同じですが直近の要素1つだけを取得していることが確認できます。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村 FC2 Blog Ranking

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次