jQueryで親要素や先祖要素を取得する方法です。
親要素や先祖要素、一番近い要素などそれぞれに適切なメソッドがあります。使う機会も多いので、適切に使いこなしましょう。
目次
parent() で親要素を取得
1つ上の親要素を取得し、単独では先祖要素は取得できません。
基本構文
$(‘p’).parent()
parent()
の引数に特定の要素やclassを指定することができます。
親要素を罫線で囲うサンプル
HTML
1 2 3 4 |
<div> 親要素のdivタグ <p>自要素のpタグ</p> </div> |
jQuery
1 2 3 4 5 6 |
$(function() { // <p>の親要素を赤線で囲う $('p').parent().css('border','2px solid red'); }); |
結果
1 2 3 4 |
<div style="border: 2px solid red"> 親要素のdivタグ <p>自要素のpタグ</p> </div> |
親要素のdivタグ
自要素のpタグ
<p>
の親要素の<div>
要素にcss
が適用され、赤線で囲われました。
parent() で先祖要素を取得する
parent()
でも実は親要素のさらに上の先祖要素を取得できるんです。
parent()
を繋いでいくと、上へ上へと昇っていきます。
1 2 3 4 5 6 |
$(function() { // parent()の数だけ上の要素を取得できる $('p').parent().parent().parent().css('border','2px solid red'); }); |
上記の例だと、親の親の親の要素を取得できます。
ただ、可読性やメンテナンス性が悪くなるので、次にご紹介するparents()
を使いましょう。
parents() で親要素を含む先祖要素を取得
親要素を含む先祖要素を全て取得します。
parentにs
が付いてparents()
です。
基本構文
$(‘p’).parents(‘div’)
parents()
の引数に特定の要素やclassを指定することができます。
全ての先祖要素を罫線で囲うサンプル
HTML
1 2 3 4 5 6 7 |
<div class="main"> 親のさらに上のdiv要素 <div class="inner"> 親要素のdivタグ <p>自要素のpタグ</p> </div> </div> |
jQuery
1 2 3 4 5 6 |
$(function() { // <p>の先祖要素のうち<div>タグのみを全て赤線で囲う $('p').parents('div').css('border','2px solid red'); }); |
結果
1 2 3 4 5 6 7 |
<div style="border: 2px solid red"> 親のさらに上のdiv要素 <div style="border: 2px solid red"> 親要素のdivタグ <p>自要素のpタグ</p> </div> </div> |
親のさらに上のdiv要素
親要素のdivタグ
自要素のpタグ
parents()
の引数に<div>
要素を指定することで、<p>
の先祖要素の<div>
要素にcss
が適用され、赤線で囲われました。
parents()
は引数を空欄にもできますが、<body>
や<html>
要素にもスタイルが反映されてしまうため実用的ではありませんね。
特定の先祖要素のみを罫線で囲うサンプル
HTML
1 2 3 4 5 6 7 8 9 10 |
<div class="wrap"> 一番外側のdiv要素 <div class="main"> 親のさらに上のdiv要素 <div class="inner"> 親要素のdivタグ <p>自要素のpタグ</p> </div> </div> </div> |
jQuery
1 2 3 4 5 6 |
$(function() { // <p>の先祖要素のうち、class名がmainの<div>要素のみを赤線で囲う $('p').parents('.main').css('border','2px solid red'); }); |
結果
1 2 3 4 5 6 7 8 9 10 |
<div class="wrap"> 一番外側のdiv要素 <div class="main" style="border: 2px solid red"> 親のさらに上のdiv要素 <div class="inner"> 親要素のdivタグ <p>自要素のpタグ</p> </div> </div> </div> |
一番外側のdiv要素
親のさらに上のdiv要素
親要素のdivタグ
自要素のpタグ
parents()
の引数に特定のclassを指定することで、<p>
の先祖要素の<div>
要素のうち、特定のclassにのみcss
が適用され、赤線で囲われました。
closest() で最も近い先祖要素を取得
引数に指定した条件に最も近い先祖要素を1つ取得します。
基本構文
$(‘p’).closest(‘div’)
closest()
の引数に特定の要素やclassを指定することができます。
条件に最も近い先祖要素を罫線で囲うサンプル
HTML
1 2 3 4 5 6 7 |
<div class="main"> 親のさらに上のdiv要素 <div class="inner"> 親要素のdivタグ <p>自要素のpタグ</p> </div> </div> |
jQuery
1 2 3 4 5 6 |
$(function() { // <p>の先祖要素で一番近い<div>要素のみを赤線で囲う $('p').closest('div').css('border','2px solid red'); }); |
結果
1 2 3 4 5 6 7 |
<div class="main"> 親のさらに上のdiv要素 <div class="inner" style="border: 2px solid red"> 親要素のdivタグ <p>自要素のpタグ</p> </div> </div> |
親のさらに上のdiv要素
自要素のpタグ
<p>
の先祖要素で一番近い<div>
要素にスタイルを適用しました。
今回ご紹介したメソッドは$(this)
を使ったクリックイベントなどと併用し、よく使うと思います。
遠くの要素をparent()
の連打で取得しようとしたり、直前の要素をわざわざparents()
で指定することなく、適切なメソッドで親要素を取得してみましょう。