jQueryで親要素を取得するいくつかの方法〜parent,parents,closest

  • このエントリーをはてなブックマークに追加
  • Pocket

スポンサードリンク

jQueryで親要素や先祖要素を取得する方法です。

親要素や先祖要素、一番近い要素などそれぞれに適切なメソッドがあります。使う機会も多いので、適切に使いこなしましょう。

 

parent() で親要素を取得

1つ上の親要素を取得し、単独では先祖要素は取得できません。

基本構文

$(‘p’).parent()

parent()の引数に特定の要素やclassを指定することができます。

親要素を罫線で囲うサンプル

HTML

jQuery

結果

親要素のdivタグ

自要素のpタグ

 

<p>の親要素の<div>要素にcssが適用され、赤線で囲われました。

parent() で先祖要素を取得する

parent()でも実は親要素のさらに上の先祖要素を取得できるんです。

parent()を繋いでいくと、上へ上へと昇っていきます。

上記の例だと、親の親の親の要素を取得できます。

ただ、可読性やメンテナンス性が悪くなるので、次にご紹介するparents()を使いましょう。

parents() で親要素を含む先祖要素を取得

親要素を含む先祖要素を全て取得します。

parentにsが付いてparents()です。

基本構文

$(‘p’).parents(‘div’)

parents()の引数に特定の要素やclassを指定することができます。

全ての先祖要素を罫線で囲うサンプル

HTML

jQuery

結果

親のさらに上のdiv要素

親要素のdivタグ

自要素のpタグ

 

parents()の引数に<div>要素を指定することで、<p>の先祖要素の<div>要素にcssが適用され、赤線で囲われました。

parents()は引数を空欄にもできますが、<body><html>要素にもスタイルが反映されてしまうため実用的ではありませんね。

特定の先祖要素のみを罫線で囲うサンプル

HTML

jQuery

結果

一番外側のdiv要素

親のさらに上のdiv要素

親要素のdivタグ

自要素のpタグ

 

parents()の引数に特定のclassを指定することで、<p>の先祖要素の<div>要素のうち、特定のclassにのみcssが適用され、赤線で囲われました。

closest() で最も近い先祖要素を取得

引数に指定した条件に最も近い先祖要素を1つ取得します。

基本構文

$(‘p’).closest(‘div’)

closest()の引数に特定の要素やclassを指定することができます。

条件に最も近い先祖要素を罫線で囲うサンプル

HTML

jQuery

結果

親のさらに上のdiv要素

親要素のdivタグ
自要素のpタグ

 

<p>の先祖要素で一番近い<div>要素にスタイルを適用しました。

 

今回ご紹介したメソッドは$(this)を使ったクリックイベントなどと併用し、よく使うと思います。

参考:jQueryの$(this)の使い方

遠くの要素をparent()の連打で取得しようとしたり、直前の要素をわざわざparents()で指定することなく、適切なメソッドで親要素を取得してみましょう。

スポンサードリンク

  • このエントリーをはてなブックマークに追加
  • Pocket

コメントを残す

*