jQueryで親要素を取得する:parent(), parents(), closest()

今回は、jQueryで親要素を取得する方法を説明します。紹介するメソッドは「parent()」「parents()」「closest()」の3つです。

親要素を取得するparent()

親要素を取得する最もシンプルな方法は「parent()」メソッドを使用することです。

(例1)#targetの親要素#parentを取得する
HTML

jQuery

parent()とfind()を組み合わせた便利な使い方

例えば、同じ親要素内にあるタグを取得したい時に使います。「find()」メソッドと併用することが多いです。

※「find()」は、タグやclass、idを検索するjQueryの機能です

(例2)セレクトされた要素と同じ#parent内のh1タグを取得
HTML

jQuery

1階層より上の親(先祖要素)の取得方法

jQueryは「メソッドチェーン」という方式を採用しており、「.」で鎖のようにつなげて使用することができます。

ただし、HTMLの変更時に改修が必要なので次で説明する「parents()」メソッドを使用するほうが良いでしょう。

(例3)#parant3の中のh1タグを取得
HTML

jQuery

親要素(先祖要素)を取得するparents()

「parents()」メソッドは、セレクトした要素の全て親要素を取得します。また、parents('セレクター')のように引数としてセレクターを指定することで、条件を指定することもできます。

(例3)#parant3の中のh1タグをセレクトする
jQuery

このように、「parent()」をメソッドチェーンでつなげるよりも、シンプルかつHTMLの変更にも対応しやすくなります。

直近の親要素を取得するclosest()

セレクトした要素から最も近い親要素を取得します。parents()と同じく引数にセレクターを指定することもできます。

(例3)#parant3の中のh1タグをセレクトする
jQuery


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて