勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

jQueryにてclosestの使いどころとparent / parentsとの違いについて

  jQuery JavaScript

あるソースコードを見ていると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>

いずれもparent_1が出力される。

解説等

複数階層上がる場合はclosestが簡潔に書ける(parentだと複数回記述しないといけない)。

parentsはセレクタを指定するとclosestと同じように使えるが、指定しない場合は全ての親要素を取得するという違いがある。

 - jQuery JavaScript

  関連記事

ブラウザのSafariのみスクロール関連のイベントが発火しない場合の対応方法

jQueryで一定距離スクロールさせた場合に発火するイベントをプログラムしていた ...

Lightboxで画像拡大時にダウンロードリンクを設置する方法

Lightboxで画像拡大時にダウンロードリンクを設置したいと要望を受けた。もち ...

セレクトメニューにサジェスト機能をつける方法(select2)

formのselectメニューで何文字が入力すると候補を絞って表示させるサジェス ...

formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)

フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...

jQueryで特定のdata属性をセレクタとして指定する方法

jQueryで特定のdata属性をクリックした際に何らかのイベントを実行したかっ ...