要素の兄弟要素を取得

2024 7/30

2024.05.18 2024.07.30

childrenメソッドは、選択された要素の直下にあるすべての子要素を取得します。

children

記法

$(selector).children(filter);
============================
selector : 親要素を指定
filter : (任意)子要素をフィルタリングするためのセレクタ。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>childrenメソッドについて</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <div id="parent_element">
      <div class="child-element">子要素1</div>
      <div class="child-element">子要素2</div>
      <p class="child-element">子要素3</p>
      <span>子要素4</span>
    </div>

    <button id="show_all_children">すべての子要素を表示</button>
    <button id="show_filtered_children">特定の子要素を表示</button>
    <button id="reset">リセット</button>

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

// ページの読み込みが完了
$(function () {
  // ボタンがクリックされたときにすべての子要素を表示
  $("#show_all_children").on("click", function () {
    // #parent_elementの直下にあるすべての子要素を取得して背景色を変更
    $("#parent_element").children().css("background-color", "#bfdd9e");
  });

  // ボタンがクリックされたときに特定の子要素を表示
  $("#show_filtered_children").on("click", function () {
    // #parent_elementの直下にあるclass="child-element"の子要素を取得して背景色を変更
    $("#parent_element")
      .children(".child-element")
      .css("background-color", "lightblue");
  });

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

.child-element {
  padding: 10px;
  margin: 5px;
  border: 1px solid #000;
}

出力結果

子要素1

子要素2

子要素3

子要素4