【jQuery】closest()を使って要素から最も近い親要素を取得する!

要素から最も近い親要素を取得するにはclosest()を使用します。

closest()とは、要素から最も近い親要素を対象とするメソッドであり、指定したセレクタの要素から最も近い親要素を指定することができます。

親要素のイメージは指定した要素よりも階層が一つ上の要素を指すと思いますが、closest()の場合は指定した要素よりも階層が上である要素が親要素とまります。

その為、closest()は、一つ上の階層の要素(親要素)が対象の範囲内であるparent()メソッドと比べて、指定した要素よりも階層が上である要素全てが対象の範囲内となりますので間違えないようにしましょう。

今回は、jQueryのclosest()を使って要素から最も近い親要素を取得する方法について以下の内容で解説していきます。

⚫︎ パラメータが1つ上の階層の要素(親要素)に一致する場合
⚫︎ パラメータが1つ上の階層の要素(親要素)に一致しない場合

⚫︎ closest()とparent()の違い

ハルトさん

今回はjQueryのclosest()メソッドで指要素から最も近い親要素を取得する方法について説明していきます。

さとみさん

はい!
お願いします!

closest()とは

closest()とは、closest()とは、要素から最も近い親要素を対象とするメソッドであり、セレクタに一致する最も近い親要素を対象とします。

closest()の書き方

closest()メソッドの構文は下記となります。

パラメータ

⚫︎ 親要素のセレクタ:
セレクタのもっとも近い親要素をセレクタで指定する
(jQueryオブジェクトや要素で指定してもOK)

closest()メソッドのパラメータに親要素のセレクタを指定することで、指定したセレクタから最も近い親要素を対象にすることができます。
最も近い親要素を対象にすることから一つ上の階層の要素だけが範囲ではなく、指定した要素よりも階層が上の要素なら全て対象となります。

また、closest()メソッドはバージョン1.6からjQueryオブジェクトや要素でも指定できるようになりました。

要素から最も近い親要素を取得するサンプルコード

要素から最も近い親要素を取得するサンプルコードを紹介していきます。

パラメータが1つ上の階層の要素(親要素)に一致する場合

パラメータが1つ上の階層の要素(親要素)に一致する場合を見てみます。

sample.html

index.js

実行結果

closest()メソッドによって、パラメータと一致する指定したセレクタから最も近い親要素を取得しています。
また、パラメータにセレクタだけでなく、jQueryオブジェクトや要素で指定しても親要素を取得しています。

そのため、ボタンを押すとparentクラス要素の背景色がそれぞれ変化します。

パラメータが1つ上の階層の要素(親要素)に一致しない場合

パラメータが1つ上の階層の要素(親要素)に一致しない場合を見てみます。

sample.html

index.js

実行結果

パラメータが1つ上の階層の要素(親要素)に一致しない場合は、一致するまで階層を登って探すようになり、grandParentクラスがついている親要素は存在しませんので、祖先要素が対象となります。

その為、ボタンを押すと、「ここは要素Bの祖先要素」から背景色が変化します。

さとみさん

closest()メソッドでは指定したセレクタの要素の親要素のみが対象ではないのですね!

ハルトさん

そうですね。
closest()メソッドは要素からも最も近い親要素を対象とするメソッドですので、指定したセレクタの要素の階層よりも上の要素が全て対象の範囲となります。
そして、その中から一番近くて一致する要素が対象となります。

closest()とparent()の違い

親要素を取得するメソッドはclosest()以外にもparent()があります。
しかし、closest()メソッドとparent()メソッドには大きな違いがあります。

それは、「どの階層までを親要素とみるか」という点です。

指定したセレクタの要素の1つ上の階層を親要素とするparent()メソッドに対して、closest()メソッドは、パラメータに一致する親要素を見つけるまで階層を上に辿っていきます。

sample.html

index.js

実行結果

closest()の場合はgrandParent1クラスの祖先要素を取得していますが、parent()場合はgrandParent2クラスの祖先要素を取得することができません。

その為、ボタンを押すとgrandParent1クラスの背景色が変化しますが、grandParent2クラスの背景は変化していません。

jQueryのparent()メソッドについて詳しく知りたい場合はこちらをご参考ください。

さとみさん

確かに、closest()メソッドの場合は背景色が変わっていますけど、parent()の場合は背景色が変わっていませんね!

ハルトさん

closest()メソッドはパラメータの要素と一致するまで階層を登って探しますが、parent()メソッドの場合は一つ上の階層の要素しか探しません。
これが、closest()とparent()の違いになります。

今回のポイント

closest()で指定した要素から最も近い親要素を取得

⚫︎ 指定した要素から最も近い親要素を取得するにはjQueryのclosest()メソッドを使用する

⚫︎ closest()メソッドはパラメータに親要素のセレクタを指定することで、指定したセレクタの要素から最も近い親要素のセレクタを対象にすることができる

⚫︎ closest()とparent()の違いは「どの階層までを親要素とみるか」である
(closest()メソッドは、指定した要素よりも階層が上である要素を親要素とみなし、parent()は指定した要素よりも階層が1つ上のみを親要素とみる)

Writer

Soshi

株式会社flyhawkのSoshiです。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報