jQueryにてclosestの使いどころとparent / parentsとの違いについて
あるソースコードを見ているとjQueryにてclosest()という使ったことのないメソッドが見受けられた。調べてみると要素から最も近い親要素を取得できるメソッドとのこと。親要素の取得というとparent()を思い浮かべるが挙動はかなり異なるみたい。以下に詳細をメモ。
closest
リファレンス
https://js.studio-kingdom.com/jquery/traversing/closest
ソースコード
<div class="parent_1" data-test="parent_1_2"> <div class="parent_1" data-test="parent_1"> <div class="parent_2" data-test="parent_2"> <div class="parent_3" data-test="parent_3"> <div class="target"> <div class="parent_1" data-test="parent_1_3"></div> </div> </div> </div> </div> </div> <div class="parent_1" data-test="parent_1_2"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script> $(function(){ console.log($(`.target`).closest(`.parent_1`).data(`test`)); console.log($(`.target`).parent().parent().parent().data(`test`)); console.log($(`.target`).parents(`.parent_1`).data(`test`)); }); </script>
いずれも
解説等
複数階層上がる場合はclosestが簡潔に書ける(parentだと複数回記述しないといけない)。
parentsはセレクタを指定するとclosestと同じように使えるが、指定しない場合は全ての親要素を取得するという違いがある。
関連記事
-
-
jQueryで画像が存在すれば表示、なければノーイメージ画像を表示
やりたかった事は以下の通り。 ・画像のURLはcode.jpgみたいになってる ...
-
-
formでGET送信時に空のパラメータを送信しない方法(cleanQuery)
フォームでGET送信する際、通常だと空のパラメータも送信される。結果として「ドメ ...
-
-
エリア→都道府県→路線→駅名を連携する絞り込みセレクトメニューの設置方法
エリア→都道府県→路線→駅名のドリルダウン検索をプルダウン形式で設置したい。以前 ...
-
-
テキストエリアを選択すると中身を全選択状態にする方法
テキストエリアやテキストボックスの中に文字が書いてあり、ドラッグをしなくても、そ ...
-
-
SNSのシェア(いいね)ボタンを設置できるjQueryプラグイン「jsSocials」の利用方法
サイト内にSNSのシェア(いいね)ボタンを設置する際、WordPressだと何ら ...