要素の子孫要素を検索

2024 7/30

2024.05.18 2024.07.30

findメソッドは、指定した要素のすべての子孫要素を検索して選択するために使用されます。

find

記法

$(selector).find(childSelector);
============================
selector : 親要素を指定
childSelector : 指定した子孫要素を選択

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>findメソッドについて</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <div id="parent_div">
      <p class="child">要素1(子要素)</p>
      <p class="child">要素2(子要素)</p>
      <div class="inner_div">
        <p class="grandchild">要素3(孫要素)</p>
        <span class="nested_child">ネスト要素</span>
      </div>
    </div>
    <button id="find_button">Findボタン</button>
    <button id="reset_button">リセット</button>

    <script src="CDNのURL"></script>
    <script src="./main.js"></script>
  </body>
</html>

// ページの読み込みが完了
$(function () {
  // 子孫要素を見つけて強調表示する関数
  function highlightChildren() {
    // #parent_div内の.child要素を選択し、文字色変更
    $("#parent_div").find(".child").css("color", "#f4af2b");
    // #parent_div内の.grandchild要素を選択し、背景色変更
    $("#parent_div").find(".grandchild").css("background-color", "#bfdd9e");
    // #parent_div内の.nested_child要素を選択し、背景色変更
    $("#parent_div").find(".nested_child").css("background-color", "#56c1db");
  }

  // リセットボタンで元に戻す関数
  function resetHighlight() {
    // .child要素の文字色を元に戻す
    $("#parent_div").find(".child").css("color", "");
    // .grandchild要素の背景色を元に戻す
    $("#parent_div").find(".grandchild").css("background-color", "");
    // .nested_child要素の背景色を元に戻す
    $("#parent_div").find(".nested_child").css("background-color", "");
  }

  // ボタンをクリックして子孫要素を強調表示
  $("#find_button").click(function () {
    highlightChildren();
  });

  // ボタンをクリックしてハイライトをリセット
  $("#reset_button").click(function () {
    resetHighlight();
  });
});

.child {
  font-size: 16px;
}
.grandchild {
  font-size: 14px;
}
.nested_child {
  font-size: 12px;
  display: block;
  margin-top: 10px;
}

出力結果

要素1(子要素)

要素2(子要素)

要素3(孫要素)

ネスト要素