本記事では、jQueryでparent()・parents()・closest()を使って親要素・祖先要素を取得する方法について解説しています。
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
サンプルコード
以降の解説では、下記のHTMLを使用します。自分のパソコンでコードを実行させながら確認したい人は下記のコードをコピペしてお使いください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style></style>
</head>
<body>
<div class="content">
<div class="inner">
<div class="content">
<p id="text">テキスト</p>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
</body>
</html>
親要素を取得する
親要素を取得するにはparent()メソッドを使います。注意点として、parent()メソッドは一つ上の階層である親要素しか取得することができないため、祖先要素を取得することができません。
parent()メソッドの使い方は以下のとおりです。
$("要素名").parent();サンプルコードを使った実行結果は以下のとおりです。
$("#text").parent();
// 実行結果：S.fn.init [div.content, prevObject: S.fn.init(1)]#textの一つ上にあるdivタグが取得できていることが確認できます。
祖先要素を取得する
親要素よりも更に上の位置にある祖先要素を取得するにはparents()メソッドまたはclosest()メソッドを使います。
この2つの違いは要素を取得できる数にあります。parents()メソッドでは該当する全ての要素を取得できるのに対し、closest()メソッドでは該当する要素が複数あった場合、指定要素に一番近い要素のみを取得します。
parents()メソッドとclosest()メソッドは()内にセレクタを指定することができるため、親要素の中で特定のクラスが付与されているものや条件に一致している要素だけ取得したい時はセレクタを指定しましょう。また、祖先要素の中には親要素も取得対象となります。
parents()メソッドとclosest()メソッドの使い方は以下のとおりです。
/* ↓親〜祖先要素を全て取得 */
$("要素名").parents();
/* ↓親〜祖先要素の中で特定の要素だけ取得 */
$("要素名").parents("セレクタ");
/* ↓親〜祖先要素の中で指定したセレクタに一致した一番近い要素だけ取得 */
$("要素名").closest("セレクタ");サンプルコードを使った実行結果は以下のとおりです。
$("#text").parents();
// 実行結果：S.fn.init(5) [div.content, div.inner, div.content, body, html, prevObject: S.fn.init(1)]
$("#text").parents(".content");
// 実行結果：S.fn.init(2) [div.content, div.content, prevObject: S.fn.init(1)]
$("#text").closest(".content");
// 実行結果：S.fn.init [div.content, prevObject: S.fn.init(1)]$(“#text”).parents();では、#textの親要素以上が全て取得されていることが確認できます。
$(“#text”).parents(“.content”);では、#textの親要素以上にクラスcontentが付与されている要素のみが取得されていることが確認できます。
$(“#text”).closest(“.content”);では、$(“#text”).parents(“.content”);と取得したい要素は同じですが直近の要素1つだけを取得していることが確認できます。
