指定されたセレクタに一番近い要素取得

2024 7/30

2024.05.18 2024.07.30

closestメソッドは、指定したセレクタに最も近い先祖要素を選択します。

closest

記法

$(selector).closest(targetSelector);
============================
selector : 親要素を指定
targetSelector : 対象の要素から見て最も近い先祖要素を選択

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>closestメソッドについて</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <div id="wrapper">
      <div class="grandparent">
        <div class="parent">
          <div class="child">
            <p class="text" id="text1">テキスト1</p>
          </div>
        </div>
      </div>
      <div class="grandparent">
        <div class="parent">
          <p class="text" id="text2">テキスト2</p>
        </div>
      </div>
      <button id="find-closest">最も近い祖先要素を探す</button>
      <button id="reset">リセット</button>
    </div>

    <!-- CDN取得 -->
    <script src="CDNのURL"></script>
    <script src="./main.js"></script>
  </body>
</html>

// ページの読み込みが完了
$(function () {
  // ボタンがクリックされたとき
  $("#find-closest").on("click", function () {
    // テキスト1要素から最も近い祖先のparentクラスを見つける
    var closestParent1 = $("#text1").closest(".parent");
    // テキスト2要素から最も近い祖先のparentクラスを見つける
    var closestParent2 = $("#text2").closest(".parent");

    // 背景色を変更
    closestParent1.css("background-color", "#bfdd9e");
    closestParent2.css("background-color", "#56c1db");
  });

  // リセットボタンがクリックされたとき
  $("#reset").on("click", function () {
    // 背景色を元に戻す
    $(".parent").css("background-color", "");
  });
});

/* 各グランドペアレントのスタイル */
.grandparent {
  padding: 20px;
  margin: 10px;
  border: 1px solid #ccc;
}
/* 各ペアレントのスタイル */
.parent {
  padding: 15px;
  border: 1px solid #aaa;
}
/* 各チャイルドのスタイル */
.child {
  padding: 10px;
  border: 1px solid #888;
}

出力結果

テキスト1

テキスト2