【jQuery】parent()で親要素をセレクタとして取得する!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2023年09月04日に投稿されました。)

jQueryで親要素をセレクタとして取得するにはparent()を使用します。

parent()とは、指定した要素の親要素をセレクタして取得することができるメソッドになります。

そのため、変更したい要素の子要素をセレクタの入り口として指定する際に使用できます。

また、parent()は指定した要素にマッチした親要素全てをセレクタとして取得するようになります。

全て取得することからもし、特定の親要素のみを取得したい場合はフィルタリングを行ったり、find()を組み合わせて使用するようにしましょう。

今回は、jQueryのperent()で親要素をセレクタとして取得する方法について紹介していきます。

この記事はこんな方におすすめ

指定した要素の親要素をセレクタとして取得する場合

parent()とは

parent()とは、指定した要素の親要素をセレクタして取得することができるメソッドになります。

指定したセレクタにマッチする親要素を全てセレクタとして取得し、オブジェクトで返されるようになります。

parent()の書き方

parent()の書き方は下記のようになります。

セレクタの後ろにparent()と追記し、引数を指定することなく使用できます。

また、任意な引数を1つ指定することでも使用できます。

parent()の引数

parent()の引数は下記のようになります。

  1. 親セレクタ:(任意)
    取得したい親要素をセレクタで指定する

parent()は任意引数として「親セレクタ」を指定します。

perent()で親要素をセレクタとして取得するサンプルコード

perent()で親要素をセレクタとして取得するサンプルコードをご紹介します。

ここでは、下記の3ケースでparent()を使用します。

  1. 親要素が存在する場合
  2. 親要素が存在しない場合
  3. 親要素が複数存在する場合

親要素が存在する場合

親要素が存在する場合にparent()を使用すると、要素にクラスを付与することができます。

● index.html

● style.css

● main.js

実行結果

親要素が存在する場合にparent()で親要素をセレクタとして取得した結果

parent()によって親要素をセレクタとして取得しています。

そのため、ボタンをクリックすると、「parent-obj」クラスの要素の色が変化しています。

親要素が存在しない場合

親要素が存在しない場合にparent()を使用すると、bodyタグを親要素のセレクタとして取得するようになります。

● index.html

● style.css

● main.js

実行結果

親要素が存在しない場合にparent()で親要素をセレクタとして取得した結果

parent()によって親要素をセレクタとして取得しています。

今回は、親要素が存在しないため、ボタンをクリックすると、階層が一番上の要素であるbody要素の色が変化しています。

親要素が複数存在する場合

親要素が複数存在する場合にparent()を使用すると、マッチした全ての親要素をセレクタとして取得することができます。

● index.html

● style.css

● main.js

実行結果

親要素が複数存在する場合にparent()で親要素をセレクタとして取得した結果

parent()によって複数の親要素をセレクタとして取得しています。

そのため、ボタンをクリックすると「obj-1」と「obj-2」と「obj-3」クラスの要素の色が変化しています。

parent()でセレクタの親要素を特定して取得する方法

parent()は指定した要素の親要素をセレクタとして取得しますが、取得したい親要素を特定することも可能です。

そのため、ここではparent()でセレクタの親要素を特定して取得する方法についてご紹介します。

フィルタリングを行う

まず、1つ目はフィルタリングを行う方法です。

perent()の引数に「親セレクタ」を指定することでセレクタの親要素を特定して取得することができます。

例えば、「obj-3」と「obj-5」クラスの親要素のみをセレクタとして取得したい場合は下記のようになります。

● index.html

● style.css

● main.js

実行結果

parent()でフィルタリングを行って特定した親要素をセレクタとして取得した結果

parent()でフィルタリングを行って、特定した親要素をセレクタとして取得しています。

そのため、ボタンをクリックすると「obj-3」と「obj-5」クラスのみの要素の色が変化しています。

find()を組み合わせて使用する

そして、2つ目はfind()を組み合わせて使用する方法です。

fund()とは指定した条件に合致する子孫要素を検索するメソッドになります。

つまり、perent()で祖先要素を取得し、その中からfind()を使用することでセレクタの親要素を特定して取得することができます。

例えば、「obj-2」と「obj-4」クラスの親要素のみをセレクタとして取得したい場合は下記のようになります。

● index.html

● style.css

● main.js

実行結果

parent()とfind()を組み合わせて特定した親要素をセレクタとして取得した結果

parent()とfind()を使用して、特定した親要素をセレクタとして取得しています。

そのため、ボタンをクリックすると「obj-2」と「obj-4」クラスのみの要素の色が変化しています。

もし、find()について詳しく知りたい場合は下記の記事をご参考ください。

parent()で親要素より階層が上の要素をセレクタとして取得する場合

parent()で親要素より階層が上の要素をセレクタとして取得するには、parent()を続けて使用します。

例えば「parent().parent()」のように指定するとセレクタの2つ上の階層になるため、祖先要素を取得することができます。

● index.html

● style.css

● main.js

実行結果

parent()で親要素より階層が上の要素をセレクタとして取得した結果

parent()によって親要素より階層が上の要素をセレクタとして取得しています。

parent()を2つ連続で使用しているため、祖先要素をセレクタとして取得しています。

そして、parent()を3つ連続で使用しているため、body要素をセレクタとして取得しています。

そのため、ボタンを押すと「grand-obj」クラスの要素の色が変化し、もう1つのボタンを押すと「body」全体の色が変化しています。

parent()を使用した実際のケース

parent()を使用した実際のケースについてご紹介します。

例えば、parent()を使用してPV表が記載されたテーブルを操作するようなコードを作成します。

● index.html

● style.css

● main.js

実行結果

parent()でPV数の最大値と最小値の月を取得した結果

parent()によってPV表が記載されたテーブルを操作しています。

そのため、「最高記録月」のボタンを押すと、「11月」のセルの色が変化し、「最低記録月」のボタンを押すと「10月」のセルの色が変化しています。

今回は下記のメソッドを使用しましたので、もし詳しく知りたい場合は下記の記事をご参考ください。

● Math.max()

● indexOf()

● addClass()

親要素をセレクタとして取得するメソッドの一覧

jQueryで親要素をセレクタとして取得するメソッドはparent()以外にも存在します。

そのため、ここでは親要素をセレクタとして取得するメソッドの一覧についてご紹介します。

parents()

parents()とは、指定した要素の親要素や祖先要素を全て取得することができるメソッドになります。

親要素や祖先要素を全て取得することから指定した要素より階層が上の要素を全て取得するようになります。

そのため、parents()を使用することで指定した要素の親要素をセレクタとして取得することができます。

● index.html

● style.css

● main.js

実行結果

parents()で親要素をセレクタとして取得した結果

parents()によって親要素をセレクタとして取得しています。

そのため、ボタンをクリックすると「parent-obj」クラスの要素の色が変化しています。

closest()

closest()とは指定した要素からさかのぼり、マッチした要素を取得するメソッドになります。

そのため、closest()を使用することで指定した要素から一番近い親要素をセレクタとして取得することができます。

● index.html

● style.css

● main.js

実行結果

closest()で親要素をセレクタとして取得した結果

closest()によって親要素をセレクタとして取得しています。

そのため、ボタンをクリックすると「obj」クラスから一番近い「parent-obj」クラスの要素の色が変化しています。

JavaScriptで親要素をセレクタとして取得する場合

JavaScriptで親要素をセレクタとして取得するにはparentNodeを使用します。

parentNodeとは、DOMツリー内の指定したノードの親ノードを返すプロパティとなります。

そのため、指定した要素の親要素をセレクタとして取得することができます。

● index.html

● style.css

● main.js

実行結果

parentNodeで親要素をセレクタとして取得した結果

parentNodeで親要素をセレクタとして取得しています。

そのため、ボタンをクリックすると「parent-obj」クラスの要素の色が変化しています。

もし、parentNodeについて詳しく知りたい場合は下記の記事をご参考ください。

家族要素をセレクタとして取得する方法

jQueryには、親要素だけでなく、子要素や兄弟要素などの家族要素をセレクタとして取得する方法があります。

そのため、ここでは家族要素をセレクタとして取得する方法についてご紹介します。

兄弟要素をセレクタとして取得する場合

兄弟要素をセレクタとして取得するにはsiblings()を使用します。

siblings()とは指定した要素の兄弟要素をセレクタとして取得することができるメソッドとなります。

● index.html

● style.css

● main.js

実行結果

siblings()で兄弟要素をセレクタとして取得した結果

siblings()で兄弟要素をセレクタとして取得しています。

そのため、ボタンをクリックすると「obj-2」と「obj-3」と「obj-4」のクラスの要素の色が変化しています。

子要素をセレクタとして取得する場合

子要素をセレクタとして取得する場合はchildren()を使用します。

children()とは指定した要素の子要素をセレクタとして取得することができるメソッドとなります。

● index.html

● style.css

● main.js

実行結果

children()で子供要素をセレクタとして取得した結果

children()で子供要素をセレクタとして取得しています。

そのため、ボタンをクリックすると「obj-1」と「obj-2」のクラスの要素の色が変化しています。

まとめ

⚫︎ parent()とは指定した要素の親要素をセレクタして取得することができるメソッドである。

⚫︎ parent()はそのまま使用するか、下記の引数のを指定して使用する。
・親セレクタ(任意)

⚫︎ 親要素が存在する場合にparent()を使用すると、親要素をセレクタとして取得する。

⚫︎ 親要素が重複して存在する場合にparent()を使用すると、一番最初にマッチした親要素をセレクタとして取得する。

⚫︎ 親要素が存在しない場合にparent()を使用すると、body要素をセレクタとして取得する。

⚫︎ perent()でセレクタの親要素を特定して取得するには下記の2つの方法がある。
・フィルタリングを行う
・find()を組み合わせて使用する

⚫︎ parent()で親要素より階層が上の要素をセレクタとして取得するにはparent()を階層の回数分、続けて使用する。

⚫︎ 親要素をセレクタとして取得するメソッドとして下記のようなメソッドがある。
・parents()
(指定した要素の親要素や祖先要素を全て取得するメソッド)
・closest()
(指定した要素から最も近い親要素を取得するメソッド)

⚫︎ JavaScriptで親要素をセレクタとして取得するにはparentNodeを使用する。

⚫︎ 兄弟要素をセレクタとして取得するにはsiblings()を使用する。

⚫︎ 要素をセレクタとして取得する場合はchildren()を使用する。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA