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

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

親要素を取得するparent()

親要素を取得する最もシンプルな方法は「parent()」メソッドを使用することです。 (例1)#targetの親要素#parentを取得する HTML
<div id="parent">
    <div id="target"></div>
</div>
jQuery
$("#target").parent();

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

例えば、同じ親要素内にあるタグを取得したい時に使います。「find()」メソッドと併用することが多いです。 ※「find()」は、タグやclass、idを検索するjQueryの機能です (例2)セレクトされた要素と同じ#parent内のh1タグを取得 HTML
<div id="parent">
    <h1>見出し</h1>
    <div id="target"></div>
</div>
jQuery
$("#target").parent().find("h1");

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

jQueryは「メソッドチェーン」という方式を採用しており、「.」で鎖のようにつなげて使用することができます。 ただし、HTMLの変更時に改修が必要なので次で説明する「parents()」メソッドを使用するほうが良いでしょう。 (例3)#parant3の中のh1タグを取得 HTML
<div id="parent3">
    <h1>見出し</h1>
    <div id="parent2">
        <div id="parent1">
            <div id="target"></div>
        </div>
    </div>
</div>
jQuery
$("#target").parent().parent().parent().find("h1");

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

「parents()」メソッドは、セレクトした要素の全て親要素を取得します。また、parents('セレクター')のように引数としてセレクターを指定することで、条件を指定することもできます。 (例3)#parant3の中のh1タグをセレクトする jQuery
$("#target").parents('#parent3').find("h1");
このように、「parent()」をメソッドチェーンでつなげるよりも、シンプルかつHTMLの変更にも対応しやすくなります。

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

セレクトした要素から最も近い親要素を取得します。parents()と同じく引数にセレクターを指定することもできます。 (例3)#parant3の中のh1タグをセレクトする jQuery
$("#target").closest('#parent3').find("h1");

イベント

2017/12/05(火)
Design Thinking Square