MENU
  1. ホーム
  2. JS
  3. jQuery
  4. 要素のセットをフィルタリング

要素のセットをフィルタリング

jQuery
2024.05.18

filterメソッドは、指定した条件に一致する要素をフィルタリングして返します。

filter
記法

$(selector).filter(criteria);
============================
selector : 親要素を指定
criteria : フィルタリングの条件（セレクタや関数）を指定

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>filterメソットについて</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <input type="text" id="search_box" placeholder="検索キーワードを入力" />
    <ul id="item_list">
      <li class="item">JavaScript</li>
      <li class="item">jQuery</li>
      <li class="item">HTML</li>
      <li class="item">CSS</li>
      <li class="item">React</li>
      <li class="item">Angular</li>
      <li class="item">Vue</li>
    </ul>

    <!-- CDN取得 -->
    <script src="CDNのURL"></script>
    <script src="./main.js"></script>
  </body>
</html>
// ページの読み込みが完了
$(function () {
  // 検索ボックスの入力イベントを監視
  $("#search_box").on("keyup", function () {
    var keyword = $(this).val().toLowerCase();

    // リストアイテムをフィルタリング
    $("#item_list .item").filter(function () {
      $(this).toggle($(this).text().toLowerCase().indexOf(keyword) > -1);
    });
  });
});
#search_box {
  margin-bottom: 10px;
  padding: 5px;
  width: 100%;
  box-sizing: border-box;
}
#item_list .item {
  list-style: none;
  padding: 10px;
  margin-bottom: 5px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  transition: background-color 0.3s;
}
#item_list .item:hover {
  background-color: #e0e0e0;
}
出力結果
  • JavaScript
  • jQuery
  • HTML
  • CSS
  • React
  • Angular
  • Vue
jQuery