ITコラム

jquery closest

jQuery

2018.10.12

jQuery【 closest 】条件に合致する直近の上位要素を取得

jQuery の closest メソッドは、ある要素の親要素を取得することができるメソッドです。
親要素を取得するという点では、parent メソッドや parents メソッドと同じですが、closest メソッドは 引数で指定した条件に合致する直近の上位要素を取得するため、必要な要素をピンポイントで取得できるというメリットがあります。
今回は、jQuery の closest メソッドの使用方法について紹介します。

parent メソッドと parents メソッドの使用方法については、以下のページをご参照下さい。
jQuery【 parent 】親要素を取得する parent と parents

また、下位要素を取得するための find メソッドや children メソッド もあります。
find メソッドと children メソッドの使用方法については、以下のページをご参照下さい。
jQuery【 find 】子要素や孫要素を取得
jQuery【 children 】子要素を取得

目次

1.closest メソッド
2.closest メソッドで親要素を取得

1.closest メソッドと

 
closest メソッドとは、ある要素の直近の上位要素を取得するメソッドです。

正確には、現在の要素も含み、そこから遡って 引数で設定した条件を満たす 最初の要素を取得します。

closest メソッドは、 次のように記述して使用します。

$(セレクタ).closest( selector );

$(セレクタ).closests( selector [, context] );

$(セレクタ).closest( jQuery object );

$(セレクタ).closests( element );

引数の内容は以下の通りです。

.closest( selector )

selector
取得する要素をセレクタで指定

.closests( selector [, context] )

selector
取得する要素をセレクタで指定

[, context]
絞り込む範囲を指定

.closests( jQuery object )

jQuery object
取得する要素をjQueryオブジェクトで指定

.closests( element )

element
取得する要素を DOM 要素で指定

▲目次へ戻る

 

2.closest メソッドで親要素を取得

 
closest メソッドを使用して、子要素(p要素)の直近の親要素(div要素)の背景色を変更します。
closest ボタンをクリックしてみて下さい。
( reset ボタンをクリックするとリセットされます。)

 

 div 要素

 div 要素

 p 要素

 
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $("#btn1").on("click", function(e) {
    $("#p1").closest("div").css("background-color","skyblue");
  });

  $("#btn2").on("click", function(e) {
    $("#p1").closest("div").css("background-color","#EEE");
  });
});
//-->
</script>

<div style="background-color:#CCC; padding:20px; border:1px solid;">
  <input type="button" id="btn1" value="closest"> <input type="button" id="btn2" value="reset">
  <div style="background-color:#EEE; border:1px solid; padding:10px;">
   div 要素
    <div style="border:1px solid; padding:10px;">
     div 要素
      <p id="p1" style="border:1px solid; padding:10px;">
       p 要素
      </p>
    </div>
  </div>
</div>

css の背景色を変える記述方法については、以下のページをご参照下さい。
jQuery【 CSS 】colorとfontを変更するサンプル

「 $(“#p1”).closest(“div”) 」の記述で、id 名が p1 の要素から遡って直近の div 要素が取得対象となります。

closest メソッドを使用すると 現在の要素も検索対象となるため、上のサンプルでは id 名が p1 の要素自体も取得対象となります。

ですので、上のサンプルの p 要素を div 要素に変更すると、次のように 現在の要素(子要素)のみがヒットします。

 

 div 要素

 div 要素

 div 要素(子要素)

▲目次へ戻る

SHARE

最新記事

修正_アイキャッチ

企業インタビュー

2020.02.21

【企業の声:株式会社レンサ】自社コンテンツを400以上生み出す会社が未経験からエンジニアが育つ理由とその採用基準を語る

本日は株式会社レンサへお邪魔し、代表取締役 武井 哲也さん、システム事業部 課長 杉山 敬太さんへお話を伺いました! ▲左から順に株式会社レンサ 杉山さん、弊社営業六角、株式会社レンサ 菊池さん、武井さん 社名 株式会社 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.