今回は、jQueryで親要素を取得する方法を説明します。紹介するメソッドは「parent()」「parents()」「closest()」の3つです。親要素を取得するparent()親要素を取得する最もシンプルな方法は「parent()」メソッドを使用することです。同じ親要素内にあるタグを取得したい時に使います。「find()」メソッドと併用することが多いです。id="target"></div></div>jQuery$("#target").parent().find("h1");1$("#target").parent().find("h1");1階層より上の親(先祖要素)の取得方法jQueryは「メソッドチェーン」という方式を採用しており、「.」で鎖のようにつなげて使用することができます。HTMLの変更時に改修が必要なので次で説明する「parents()」メソッドを使用するほうが良いでしょう。id="target"></div></div></div></div>jQuery$("#target").parent().parent().parent().find("h1");1$("#target").parent().parent().parent().find("h1");親要素(先祖要素)を取得するparents()「parents()」メソッドは、セレクトした要素の全て親要素を取得します。parents('セレクター')のように引数としてセレクターを指定することで、条件を指定することもできます。(例3)#parant3の中のh1タグをセレクトするjQuery$("#target").parents('#parent3').find("h1");1$("#target").parents('#parent3').find("h1");このように、「parent()」をメソッドチェーンでつなげるよりも、シンプルかつHTMLの変更にも対応しやすくなります。直近の親要素を取得するclosest()セレクトした要素から最も近い親要素を取得します。parents()と同じく引数にセレクターを指定することもできます。MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。