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

最新記事

img001

卒業生インタビュー

2019.08.28

【卒業生の声:田中さん】美容師からプログラマーへ転身!PCスキルゼロからチーム開発でリーダーを務めるまでに成長したその秘密に迫る

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社アニシス プログラマカレッジ卒業生の田中さんにお話しをお伺いしました! 目次 IT業界へ憧れ、PCスキルゼロからプログラマーを目指すー 独 […]

続きを見る

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.