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

colmun_main12179

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 要素(子要素)

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です