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

jQueryでのclosestメソッドの使い方とは?closestメソッドを正しく使おう!

 
jQueryでのclosestメソッドの使い方とは?closestメソッドを正しく使おう!

SE
closestメソッドの特徴とはなんでしょうか?

PM
このメソッドを利用すると親要素を取得できます。様々な方法がありますので実際のコードを見ていきましょう。

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


今回は、jQueryでのclosestメソッドの使い方について説明します。

closestメソッドを使用すると、親要素を取得できます。closestメソッドでは、セレクタ指定、class指定、id指定など、様々な方法で親要素を取得できます。また、findメソッドとの組合せ方法についても紹介します。

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

基本的な使い方

closestメソッドの基本的な使い方を紹介します。closestメソッドを使用すると、親要素を取得できます。HTMLを以下に記載します。

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

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

parent3

parent2

parent1

ここでは、セレクタ指定で親要素を取得しています。

id指定で取得

closestメソッドでは、id指定で親要素を取得できます。HTMLを以下に記載します。

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

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

parent3

parent2

parent1

このように、jQueryのclosestにて、id指定で親要素を取得できていることが分かります。

第2引数の使い方

closestメソッドでは、第2引数を指定することで検索範囲を指定できます。
HTMLを以下に記載します。

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

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

parent3

parent2

parent1

parent5内でtarget classを検索しているため、親要素が見つからないことが分かります。

戻り値

closestメソッドでは、戻り値にlengthメソッドを指定することで、検索結果を取得できます。HTMLを以下に記載します。

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

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

parent3

parent2

parent1

親要素が見つかるとlengthが1、親要素が見つからないとlengthが0になります。親要素の検索結果で条件分岐させることができます。

findメソッドとの組合せ

closestメソッドとfindメソッドの組合せ方法を紹介します。closestメソッドで親要素を検索し、findメソッドで子要素を検索します。つまり同階層の要素を検索できるということです。
HTMLを以下に記載します。

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

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

parent3

parent2

parent1

text

title

SE
findメソッドと併用することで親要素も子要素も取得できるのですね。

PM
親要素を取得できるメソッドは他にもあります。いろいろ試して理解を深めていきましょう。

まとめ

いかがでしたでしょうか。jQueryでのclosestメソッドの使い方について説明しました。closestメソッドを使用すると、親要素を取得できます。closestメソッドでは、セレクタ指定、class指定、id指定など、様々な方法で親要素を取得できます。また、findメソッドとの組合せ方法についても紹介しました。

親要素を取得するメソッドは、closestメソッド以外にもparentメソッドなどもあります。興味のある方は違いを調べてみてください。

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


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

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

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

Search

Popular

reccomended

Categories

Tags