今回は、jQueryで親要素を取得する方法を説明します。紹介するメソッドは「parent()」「parents()」「closest()」の3つです。
親要素を取得するparent()
親要素を取得する最もシンプルな方法は「parent()」メソッドを使用することです。
（例１）#targetの親要素#parentを取得する
HTML
|
1 2 3 |
<div id="parent"> <div id="target"></div> </div> |
jQuery
|
1 |
$("#target").parent(); |
parent()とfind()を組み合わせた便利な使い方
例えば、同じ親要素内にあるタグを取得したい時に使います。「find()」メソッドと併用することが多いです。
※「find()」は、タグやclass、idを検索するjQueryの機能です
（例２）セレクトされた要素と同じ#parent内のh1タグを取得
HTML
|
1 2 3 4 |
<div id="parent"> <h1>見出し</h1> <div id="target"></div> </div> |
jQuery
|
1 |
$("#target").parent().find("h1"); |
1階層より上の親（先祖要素）の取得方法
jQueryは「メソッドチェーン」という方式を採用しており、「.」で鎖のようにつなげて使用することができます。
ただし、HTMLの変更時に改修が必要なので次で説明する「parents()」メソッドを使用するほうが良いでしょう。
（例３）#parant3の中のh1タグを取得
HTML
|
1 2 3 4 5 6 7 8 |
<div id="parent3"> <h1>見出し</h1> <div id="parent2"> <div id="parent1"> <div id="target"></div> </div> </div> </div> |
jQuery
|
1 |
$("#target").parent().parent().parent().find("h1"); |
親要素（先祖要素）を取得するparents()
「parents()」メソッドは、セレクトした要素の全て親要素を取得します。また、parents('セレクター')のように引数としてセレクターを指定することで、条件を指定することもできます。
（例３）#parant3の中のh1タグをセレクトする
jQuery
|
1 |
$("#target").parents('#parent3').find("h1"); |
このように、「parent()」をメソッドチェーンでつなげるよりも、シンプルかつHTMLの変更にも対応しやすくなります。
直近の親要素を取得するclosest()
セレクトした要素から最も近い親要素を取得します。parents()と同じく引数にセレクターを指定することもできます。
（例３）#parant3の中のh1タグをセレクトする
jQuery
|
1 |
$("#target").closest('#parent3').find("h1"); |
