jQueryで親要素の取得ができるparentメソッドの使い方
jQueryには、親要素を効率よく取得することができる「parentメソッド」があります。ここでは、parentメソッドの使い方やfindメソッドと併用する方法などを紹介していきます。jQueryを勉強中の方などはぜひ、参考にしてみてください。
- SE
- findメソッドとも併用できるんですね。
- PM
- 併用することでより便利にjQueryが使えますよ！
実行環境
・macOS 10.15.6
・Repl.it
目次
parentメソッドとは？
parentメソッドは、指定した要素の一階層上の親要素を取得することができるメソッドです。parentメソッドは、次のように記述します。
|
1 |
$("セレクタ").parent(); |
例えば、以下のようなHTMLコードがあった場合、targetの親要素を取得したい場合は以下のようになります。
|
1 2 3 |
<div id="parent"> <div id="target">ターゲット</div> </div> |
|
1 |
$("#target").parent(); |
これで、一階層上の「div#parent」を取得することができます。
先祖要素や直近要素の取得
parentメソッドの他にも、親要素を取得できるメソッドがあります。ここでは、「parentsメソッド」および「closestメソッド」についても解説します。
parentsメソッドとは
parentメソッドと同じような名前でややこしいのですが、parentメソッドが一階層上の親要素を取得するのに対し、parentsメソッドは先祖要素でセレクタにマッチする要素をすべて取得します。
例えば、次のようなリストがあるとします。
|
1 2 3 4 5 6 7 8 9 10 |
<ul id="fruits"> <ul id="red"> <li id="apple">リンゴ</li> <li id="strawberry">イチゴ</li> </ul> <ul id="yellow"> <li id="lemon">レモン</li> <li id="banana">バナナ</li> </ul> </ul> |
では、appleをセレクタに指定し、parents要素で文字色を赤に変えてみましょう。
appleの先祖要素なので、「red」および「fruits」が該当します。
|
1 2 3 |
$(function(){ $("#apple").parents().css("color","red"); }); |
結果は次のようになります。
実行結果
closestメソッドとは
closestメソッドは、祖先要素で指定した引数に一番近い要素を取得します。
parentと使い方はほぼ同じです。
では、先ほどのコードを使って記述してみましょう。
|
1 2 3 4 5 6 7 8 9 10 |
<ul id="fruits"> <ul id="red"> <li id="apple">リンゴ</li> <li id="strawberry">イチゴ</li> </ul> <ul id="yellow"> <li id="lemon">レモン</li> <li id="banana">バナナ</li> </ul> </ul> |
セレクタを指定し、後ろにclosestメソッドを記述します。引数には、取得したい要素名を記述します。
|
1 2 3 |
$(function(){ $("#apple").closest("ul").css("color","red"); }); |
このように記述すると、「id=apple」から見て一番近いul要素ということで「id=red」を取得することができます。
結果は次のようになります。
実行結果
findメソッドとの併用
親要素を取得する3つのメソッド（parent() / parents() / closest()）について紹介してきました。では最後に、よく使われる「parentメソッドとfindメソッドとの併用方法」について解説していきます。
|
1 2 3 4 5 6 7 8 9 |
<ul id="fruits"> <h1>フルーツ一覧</h1> <ul> <li id="apple">リンゴ</li> <li id="strawberry">イチゴ</li> <li id="lemon">レモン</li> <li id="banan">バナナ</li> </ul> </ul> |
ここでは、appleをセレクタに指定し、appleの2階層上の「フルーツ一覧」という文字を赤色にします。コードは次のようになります。
|
1 2 3 |
$(function(){ $("#apple").parent().parent().find("h1").css("color", "red"); }); |
このように、parent()の後ろにメソッドチェーンでfind()をつなげることで、親要素からh1要素を取得することができます。ちなみに、parent()をつなげると階層が一つずつ上がっていきます。
結果は次のとおりです。
実行結果
- SE
- ちゃんとタイトルの文字を変更できました！
- PM
- 階層が深くなってしまった場合も、findメソッドと組み合わせると便利ですよ。
parentメソッドで効率よく要素を取得しよう
parentメソッドでは、親要素を取得するだけでなく子要素を取得するfindメソッドと組み合わせることで、より効率的に欲しい要素を取得することができます。条件によって親要素の値を変更する場合にとても便利ですので、parentsメソッドやclosestメソッドと併せて、ぜひ活用してみてくださいね。
