「jQuery」filterメソッドで要素を絞り込むサンプル

2022年1月27日

書式
$(セレクタ名).filter(function() {
return 条件式
}).css(属性,値);
filter関数で要素をフィルタリングしています。
各要素について、関数がtrueを返す場合、その要素は対象として残ります。
関数がfalseを返す場合、その要素は除外されます。

使用例

<p><input type="text" class="info" value="11" ></p>
<p><input type="text" class="info" value="22" ></p>
<p><input type="text" class="info" value="33" ></p>
<p><input type="text" class="info" value="44" ></p>
<p><input type="button" id="btA" value="検索" /></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
 //ボタン「検索」を押下後functionを呼び出す
      $("#btA").click(function(){
            const nn = 25;
        //filterメソッド 
            $(".info").filter(function() {
                  return $(this).val() < nn;
            }).css("background","skyblue");
      });

});
</script>

実行結果
「検索」 ボタンを押すと25より小さい値のテキストボックスの色が変わります。