jQuery

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

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

jQueryの学習におすすめ参考書
jQuery最高の教科書

本書情報
著者株式会社シフトブレイン
発売日2013/11/26
ページ数320ページ
Kindle版
レビュー
(Amazon)
(93件)

参考書が苦手な人はUdemyの動画がおすすめ
即実践 手を動かして6時間でjQueryをマスターしよう。
知識、経験ゼロからjQueryを使いこなそう

動画情報
作成者村守 康
学習時間6時間
受講者数28,547人
レビュー (425件)
動画の詳細はこちら

サンプルコード

以降の解説では、下記の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アクセスランキング にほんブログ村