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

jQueryのparentメソッドとは?parentメソッドの使用方法を紹介

2021年02月03日

SE
parentメソッドとはどういったものでしょうか?

PM
parentとあるように親要素を取得できるメソッドです。

jQueryでのparentメソッドの使い方とは?


今回は、jQueryでのparentメソッドの使い方について説明します。parentメソッドを使用すれば、親要素を取得できます。

基本的な使い方から、引数の使い方について紹介します。また、attrメソッドやchildrenメソッドとの組み合わせについても紹介します。

jQueryでのparentメソッドの使い方に興味のある方はぜひご覧ください。

基本的な使い方

parentメソッドを使用した、親要素の取得方法を紹介します。HTMLを以下に記載します。

jQueryは以下のように記述します。

実行結果は以下のようになります。

このように、jQueryではparentメソッドを使用して親要素を取得できます。

attrメソッドとの組み合わせ

parentメソッドとattrメソッドを組み合わせることで、取得した親要素の属性を取得できます。HTMLを以下に記載します。

jQueryは以下のように記述します。

実行結果は以下のようになります。

このように、jQueryではparentメソッドとattrメソッドを組み合わせて、親要素の属性を取得できます。

childrenメソッドとの組み合わせ

parentメソッドとchildrenメソッドを組み合わせることで、同階層(親要素の子要素)を取得できます。HTMLを以下に記載します。

jQueryは以下のように記述します。

実行結果は以下のようになります。

title

parent

children


このように、jQueryではparentメソッドとchildrenメソッドを組み合わせて、同階層の要素を取得できます。

先祖要素の取得

jQueryを利用した先祖要素の取得方法を紹介します。以下の2つの方法で取得できます。

①parentメソッドのチェーン
②parentsメソッド

どちらの方法でも先祖の要素を取得できますが、②の方がシンプルに書けるので不具合のリスクが少ないです。HTMLを以下に記載します。

jQueryは以下のように記述します。

実行結果は以下のようになります。

同じ結果が取得できていることが分かります。

SE
親要素とは上の階層のメソッドのことなんですね。よくわかりました。

PM
このメソッドを理解できれば親の親要素も所得できるので大変便利です。

まとめ

いかがでしたでしょうか。

jQueryでのparentメソッドの使い方について説明しました。parentメソッドを使用すれば、親要素を取得できます。

基本的な使い方から、引数の使い方について紹介しました。また、attrメソッドやchildrenメソッドとの組み合わせについても紹介しました。

ぜひご自身でソースコードを書いて、理解を深めてください。


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

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

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

Search

Popular

reccomended

Categories

Tags