MENU
  1. ホーム
  2. JS
  3. jQuery
  4. 指定されたセレクタに一致する要素を除外

指定されたセレクタに一致する要素を除外

jQuery
2024.05.18

notメソッドは、指定したセレクタに一致しない要素を選択します。

not
記法

$(selector1).not(selector2);
============================
selector1 : 要素を指定
selector2 : 一致しない要素

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>notメソッドについて</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <ul id="item_list">
      <li class="item">アイテム1</li>
      <li class="item">アイテム2</li>
      <li class="item special">アイテム3</li>
      <li class="item">アイテム4</li>
    </ul>
    <button id="highlight_button">特定アイテムをハイライト</button>
    <button id="reset_button">リセット</button>

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

// ページの読み込みが完了
$(function () {
  // ボタンがクリックされたとき、特定のアイテムを除外してハイライト
  $("#highlight_button").on("click", function () {
    // 'special'クラスを持たないアイテムをハイライト
    $("#item_list .item").not(".special").css("background-color", "#bfdd9e");
  });

  // リセットボタンがクリックされたとき、すべてのアイテムのハイライトを解除
  $("#reset_button").on("click", function () {
    $("#item_list .item").css("background-color", "");
  });
});
#item_list {
  list-style: none;
  padding: 0;
}
.item {
  padding: 10px;
  margin: 5px;
  border: 1px solid #000;
}
.special {
  font-weight: bold;
}
出力結果
  • アイテム1
  • アイテム2
  • アイテム3
  • アイテム4
jQuery