.net column
.NET開発者のためのブログメディア

Webサイトの要素

jQueryで親要素の取得ができるparentメソッドの使い方

2020年09月04日

jQueryには、親要素を効率よく取得することができる「parentメソッド」があります。ここでは、parentメソッドの使い方やfindメソッドと併用する方法などを紹介していきます。jQueryを勉強中の方などはぜひ、参考にしてみてください。

SE
findメソッドとも併用できるんですね。
PM
併用することでより便利にjQueryが使えますよ!

実行環境
・macOS 10.15.6
・Repl.it

parentメソッドとは?

parentメソッドは、指定した要素の一階層上の親要素を取得することができるメソッドです。parentメソッドは、次のように記述します。

例えば、以下のようなHTMLコードがあった場合、targetの親要素を取得したい場合は以下のようになります。

これで、一階層上の「div#parent」を取得することができます。

先祖要素や直近要素の取得

parentメソッドの他にも、親要素を取得できるメソッドがあります。ここでは、「parentsメソッド」および「closestメソッド」についても解説します。

parentsメソッドとは

parentメソッドと同じような名前でややこしいのですが、parentメソッドが一階層上の親要素を取得するのに対し、parentsメソッドは先祖要素でセレクタにマッチする要素をすべて取得します。

例えば、次のようなリストがあるとします。

では、appleをセレクタに指定し、parents要素で文字色を赤に変えてみましょう。
appleの先祖要素なので、「red」および「fruits」が該当します。

結果は次のようになります。

実行結果
parentメソッドの実行結果

closestメソッドとは

closestメソッドは、祖先要素で指定した引数に一番近い要素を取得します。
parentと使い方はほぼ同じです。

では、先ほどのコードを使って記述してみましょう。

セレクタを指定し、後ろにclosestメソッドを記述します。引数には、取得したい要素名を記述します。

このように記述すると、「id=apple」から見て一番近いul要素ということで「id=red」を取得することができます。

結果は次のようになります。

実行結果
closestメソッドの実行結果

findメソッドとの併用

親要素を取得する3つのメソッド(parent() / parents() / closest())について紹介してきました。では最後に、よく使われる「parentメソッドとfindメソッドとの併用方法」について解説していきます。

ここでは、appleをセレクタに指定し、appleの2階層上の「フルーツ一覧」という文字を赤色にします。コードは次のようになります。

このように、parent()の後ろにメソッドチェーンでfind()をつなげることで、親要素からh1要素を取得することができます。ちなみに、parent()をつなげると階層が一つずつ上がっていきます。

結果は次のとおりです。

実行結果
findメソッドとの併用結果

SE
ちゃんとタイトルの文字を変更できました!
PM
階層が深くなってしまった場合も、findメソッドと組み合わせると便利ですよ。

parentメソッドで効率よく要素を取得しよう

parentメソッドでは、親要素を取得するだけでなく子要素を取得するfindメソッドと組み合わせることで、より効率的に欲しい要素を取得することができます。条件によって親要素の値を変更する場合にとても便利ですので、parentsメソッドやclosestメソッドと併せて、ぜひ活用してみてくださいね。

>>>エンジニアの案件を探すならFEnet .NET Navi


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags

Jobs