ITコラム

プログラミングノウハウ

2018.10.12

#jQuery入門

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

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

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

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

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. closest メソッドと
2. closest メソッドで親要素を取得
3. まとめ

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 要素

　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 要素（子要素）

▲目次へ戻る