【jQuery】parent()を使って親要素を取得する!

親要素を取得するにはjQueryのparent()メソッドを使用します。

jQueryのparent()メソッドとは親要素を取得するメソッドであり、テーブルなどの入り子になっている要素でイベントを起こした際に、一部の要素だけ変更したい場合などに使用されます。

また、parents()メソッドを使用することで親要素や祖先要素を全て取得することができ、parents()メソッドとfind()メソッドを組み合わせて使用することで、親要素や祖先要素の特定の要素を取得することができます。

今回は、jQueryのparent()メソッドを使って親要素を取得する方法について以下の内容で解説していきます。

⚫︎ 指定する要素の親要素を取得する場合
⚫︎ 指定する要素の先祖要素を取得する場合

⚫︎ 指定する要素の親要素や祖先要素を全て取得する場合
⚫︎ 指定する要素の親要素や祖先要素を特定して取得する場合

ハルトさん

今回はjQueryのparent()メソッドについて説明していきます。

さとみさん

はい!
お願いします!

parent()とは

parent()メソッドとは親要素を取得するメソッドとなります。

parent()の書き方

parent()の書き方は下記となります。

$の()に要素を指定し、parent()メソッドを呼び出すことで、指定した要のが親要素を取得することができます。

$の()の要素はタグ名や、クラス名、id名を指定します。

parent()メソッドで親要素を取得するサンプルコード

parent()メソッドで親要素を指定するサンプルコードを紹介します。

指定する要素の親要素を取得する場合

指定する要素の親要素を取得する場合はparent()メソッドを使用します。

sample.html

index.js

出力結果

parent()メソッドによって、指定する要素から見た親要素を取得しています。
そのため、tdタグの親要素であるtrタグで囲まれた要素の背景色が変わっています。

指定する要素の先祖要素を取得する場合

指定する要素の先祖要素を取得する場合はparent().parent()を指定します。

sample.html

index.js

出力結果

parent()メソッドを2回呼び出すことで、指定する要素から見た先祖要素を取得しています。
そのため、thタグの祖先要素であるtbodyタグの要素の背景色が変化しています。

さとみさん

parent()を2回使用すると、祖先要素を取得できるんですね!

ハルトさん

そうですね。
parent()メソッドの回数分、取得する要素の階層が上がっていきます。
例えば、parent()メソッドを3回使用すると祖先要素の一つ上の要素を取得することができます。

指定する要素の親要素や祖先要素を全て取得する場合

指定する要素の親要素や祖先要素を全て取得する場合は、parents()メソッドを使用します。

parents()メソッドは親要素をを全て取得するメソッドとなります。

sample.html

index.js

出力結果

parents()メソッドによって親要素や祖先要素を全て取得しています。
そのため、thタグより上の階層のタグを全ての背景色が変わっています。

さとみさん

parents()メソッドを使用すると、指定した要素の親要素、祖先要素全てを取得できるんですね!

ハルトさん

そうですね。
parents()メソッドの前に要素を指定すると、指定した要素から見た親要素、祖先要素の全てを取得します。

指定する要素の親要素や祖先要素を特定して取得する場合

親要素や祖先要素の特定の要素を取得する場合は、parents()メソッドとfind()メソッドを使用します。

find()メソッドは要素を検索するメソッドとなります。

parents()メソッドで親要素や祖先要素を取得し、find()メソッドで要素を検索すことで親要素や祖先要素の特定の要素を取得することができます。

sample.html

index.js

出力結果

parents()メソッドとfind()メソッドを使用することで特定の親要素や祖先要素を取得しています。
そのため、sampleクラスの要素の背景色が変わっています。

さとみさん

parents()メソッドとfind()メソッドと組み合わせて使用すると、親要素や祖先要素の特定の要素を取得することができるんですね!

ハルトさん

そうですね。
普段は使用することはあまりないと思いますが、テーブル要素などの入れ子が多い要素に使用すると便利です。

今回のポイント

parent()で親要素を取得

⚫︎ 親要素を取得するにはjQueryのparent()メソッドを使用する

⚫︎ parent()メソッドを呼び出す回数分、要素を取得する階層が上がっていく

⚫︎ 親要素や祖先要素を全て取得する場合は、parents()メソッドを使用する

⚫︎ parents()メソッドとfind()メソッドを使用することで指定する要素の親要素や祖先要素を特定して取得する

関連記事

Queryのchildren()メソッドで子要素を取得する方法についてはこちらをご参考ください。

Writer
壷井

壷井

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

最新の案件情報

フリーランスエンジニアの案件探し