こんにちは、Ryohei（@ityryohei）です！

jQueryであるアクションの後に親要素を取得して何かする、という処理を記述する場合、必要な親要素の取得。例えば、ある要素が選択されたらその親要素を取得してごにょごにょしよう！とすると、下記のような流れになると思います。

クリックイベント取得→親要素取得→何らかの処理

クリックイベントの後、親要素を適切に取得できなければ次の処理に移れませんね。

jQueryで親要素を取得する方法はいくつかあり、下記が親要素を取得できるメソッドになります。表の右側にはメソッドの特徴を記載しています。

parent() 指定した要素から見て、一つ上の親要素を取得する
parents() 指定した要素から見て、すべての親要素を取得する
parents(selector) 指定した要素から見て、selectorと一致するすべての親要素を取得する
closest(selector) 指定した要素から見て、selectorに指定した最初の親要素を取得する

では、実際に各メソッドを使って、詳細を見てみましょう！

（下記ではconsole.logの実行結果を記載していますが、ソースにはconsole.logは記述しておりませんので、予めご了承ください。）

parent()

parent()は、指定した要素から見て、一つ上の親要素を取得するメソッドです。下記のようなHTMLがあるとして、buttonの要素から見た親要素はdivのparent cになります。実際にbuttonを指定して、いくつかのパターンでparentを実行してみましょう。

HTML

<div class="parent a">
  <div class="parent b">
    <div class="parent c">
      <button>Click Me!</button>
    </div>
  </div>
</div>

selectorを指定せずに実行してみる

$('button').on('click', function(){
  $(this).parent();
});

// 実行結果：
// length: 1
// 0: <div class="parent c">
​

複数存在する要素を指定してみる

$('button').on('click', function(){
  $(this).parent('.parent');
});

// 実行結果：
// length: 1
// 0: <div class="parent c">
​

1つ以上の上位階層にある要素を指定してみる

$('button').on('click', function(){
  $(this).parent('.parent.a');
});

// 実行結果：
// length: 0

実行結果を見てわかるように、parentメソッドでは指定した要素から見て一つ上の親要素しか取得することができません。もし、一つ以上の上の階層にある親要素を取得したい場合は下記で紹介するメソッドを使います。

parents()

parents()は、指定した要素から見て、すべての親要素を取得するメソッドになります。selectorを指定した場合は、selectorと一致するすべての親要素を取得します。実際にbuttonを指定して、いくつかのパターンでparentsを実行してみましょう。

HTML

<div class="parent a">
  <div class="parent b">
    <div class="parent c">
      <button>Click Me!</button>
    </div>
  </div>
</div>

selectorを指定せずに実行してみる

$('button').on('click', function(){
  $(this).parents();
});

// 実行結果：
// length: 5
// 0: <div class="parent c">
​// 1: <div class="parent b">
​// 2: <div class="parent a">
​// 3: <body>
​// 4: <html class="" lang="jp">

複数存在する要素を指定してみる

$('button').on('click', function(){
  $(this).parents('.parent');
});

// 実行結果：
// length: 3
// 0: <div class="parent c">
​// 1: <div class="parent b">
​// 2: <div class="parent a">

1つ以上の上の階層にある一意の要素を指定してみる

$('button').on('click', function(){
  $(this).parents('.parent.a');
});

// 実行結果：
// length: 1
// 0: <div class="parent a">
​

実行結果から見てわかるように、selectorを指定しなかった場合はすべての親要素を、selectorを指定した場合は一致するすべての親様子を取得します。

基本的に親要素の取得はparentsを利用すれば可能ですが、パフォーマンスはあまりよくないと言われています。また、処理内容によっては、複数存在する要素であっても最初に一致した親要素だけを取得したい場合があります。パフォーマンスが良く、最初に一致した親要素だけを取得したい場合に利用するのが、下記のメソッドになります。

closest()

closest()は、指定した要素から見て、selectorに指定した値と一致する最初の親要素を取得するメソッドです。実際に使ってみるとどのようなメソッドかおわかりいただけると思います。

HTML

<div class="parent a">
  <div class="parent b">
    <div class="parent c">
      <button>Click Me!</button>
    </div>
  </div>
</div>

selectorを指定せずに実行してみる

$('button').on('click', function(){
  $(this).closest();
});

// 実行結果：
// length: 0

複数存在する要素を指定してみる

$('button').on('click', function(){
  $(this).closest('.parent');
});

// 実行結果：
// length: 1
// 0: <div class="parent c">
​

1つ以上の上位階層にある要素を指定してみる

$('button').on('click', function(){
  $(this).closest('.parent.a');
});

// 実行結果：
// length: 1
// 0: <div class="parent a">
​

上記のように、closestは指定したselectorと最初に一致する親要素を取得することができます。parentsと比べてパフォーマンスが良いとされています。jQueryで親要素を取得したい場合は基本的にはclosestを利用するようにして、closestが苦手な部分は本記事で紹介した他のメソッドを利用するようにすると良いかもしれません。

以上、jQueryで親要素を取得する方法のご紹介でした！

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

お問い合わせはこちら

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。