【jQuery】:parentを使って親要素を指定する!

親要素を指定するにはjQueryの:parentを使用します。

jQueryの:parentとは子要素を持つ親要素であるかどうかを指定し、テーブルなどの入り子になっている要素でイベントを起こした際に、一部の要素だけ変更したい場合などに使用されます。

そして、子要素を持たない親要素を指定する場合は:emptyを指定することで子要素を持たない要素であると判断されます。

また、:parentする他にparent()メソッドを使って親要素を指定することもできます。

今回は、jQueryの:parentを使って親要素を指定する方法について以下の内容で解説していきます。

⚫︎ 子要素を持っている親要素を指定する場合
⚫︎ 1番上の階層にある要素の親要素を指定する場合

⚫︎ 子要素を持っていない親要素を指定する場合
⚫︎ jQueryを使用せずに親要素を指定する場合
⚫︎ parent()メソッドで親要素を指定する場合

ハルトさん

今回はjQueryの:parentについて説明していきます。

さとみさん

はい!
お願いします!

:parentとは

:parentとは子要素を持つ親要素であるかどうかを指定します。

:parentの書き方

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

$の()に要素:parentを指定することで、指定した要素が親要素を指定することができます。

例えば、下記ようなコードがあった場合に「”p:parent”」と指定するとpタグの親要素であることからdivタグの要素を指定していることになります。

:parentで親要素を指定するサンプルコード

:parentで親要素を指定するサンプルコードを紹介します。

子要素を持っている親要素を指定する場合

子要素を持っている親要素を指定してみます。

sample.html

index.js

出力結果

子要素を持っている親要素を指定しているため、tdタグの親要素であるtrタグで囲まれた要素の背景色が変わっています。

1番上の階層にある要素の親要素を指定する場合

1番上の階層にある要素の親要素を指定してみます。

sample.html

index.js

出力結果

1番上の階層にある要素の親要素を指定すると、1番上の階層にある要素が親要素であるため、その要素が親要素として指定されるようになります。
今回はtableタグの親要素はないのでtableタグが親要素として判断されています。

さとみさん

一番上の階層にある要素をparentで指定すると、その要素が親要素となるんですね!

ハルトさん

一番上の階層にある要素には親要素はありませんので、その要素が親要素として指定されるよになります。

子要素を持たない親要素を指定する場合

子要素を持たない親要素を指定する場合は、:emptyを指定します。

sample.html

index.js

出力結果

emptyを指定することで、子要素を持ってない親要素と判断されています。
そのため、h2タグの背景色は変わりません。

jQueryを使用せずに親要素を指定する場合

jQueryを使用せずに親要素を指定してみます。

sample.html

index.js

出力結果

テープルセルの背景色が変わったことから、jQueryを使用せずに親要素を指定しています。

さとみさん

jQueryを使わず同じことを実行させようとすると、とてもコードが長くなるんですね!
これだとjQueryの方がとても便利です!

ハルトさん

そうですよね。
コードの量や分かりやすさを比較するとあきらかにjQueryの方が良いですよね。

parent()メソッドで親要素を指定する場合

親要素を指定する方法は、「要素:parent」の他にparent()メソッドを使用する方法もあります。

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

sample.html

index.js

出力結果

parent()メソッドによってtdタグの親要素を指定しています。

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

今回のポイント

:parentで親要素を指定

⚫︎ 子要素を持つ親要素であるかどうかを指定するにはjQueryの:parentを使用する

⚫︎ 子要素の親要素を指定するには:parent合は$()の中に「$要素:parent」を指定する

⚫︎ 1番上の階層にある要素の親要素を指定すると、その要素が親要素として指定されるようになる

⚫︎ 子要素を持たない親要素を指定する場合は、:emptyを指定する

⚫︎parent()メソッドで親要素を指定することも可能である

関連記事

jQueryの:only-childで子要素を指定する方法についてはこちらをご参考ください。

jQueryの:first-childで最初の子要素を指定する方法についてはこちらをご参考ください。

jQueryのlast-childで最後の子要素を指定する方法についてはこちらをご参考ください。

Writer
壷井

壷井

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

最新の案件情報

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