要素の親要素を取得

2024 7/30

2024.05.18 2024.07.30

parentメソッドは、指定した要素の親要素を取得するためのメソッドです。

parent

記法

$(selector).parent();
============================
selector : 操作対象の要素

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>parentメソッドについて</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <p>未入力で送信ボタンを押して</p>
    <div id="form_container">
      <form id="example_form">
        <div class="form-group">
          <label for="username">ユーザー名</label>
          <input type="text" id="username" class="form-control" />
          <span class="error-message"></span>
        </div>
        <button type="submit">送信</button>
      </form>
    </div>

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

// ページの読み込みが完了
$(function () {
  // フォームの送信イベントを処理
  $("#example_form").submit(function (event) {
    // submitイベントの本来の動作を止める
    event.preventDefault();

    // ユーザー名の入力をチェック
    var userName = $("#username").val();
    if (userName === "") {
      // 親要素にエラーメッセージを追加
      $("#username")
        .parent()
        .find(".error-message")
        .text("ユーザー名を入力してください。");
    } else {
      // エラーメッセージをクリア
      $("#username").parent().find(".error-message").text("");
    }
  });
});

.form-group {
  margin-bottom: 1em;
}

.error-message {
  color: red;
  font-size: 0.9em;
}

出力結果

未入力で送信ボタンを押して