jQuery filterメソッドで要素を絞り込んで処理する

01. filterメソッド

filterメソッドとは

要素を絞り込んで処理を行うことができます。
以下はjQueryサイトのfilterメソッドのリンクです。
https://api.jquery.com/filter/

filterで要素を絞り込むサンプル

ボタン１を押すと15より大きい値のテキストボックスの色が変わります。
filterメソッドの自作の関数(15より大きいか)で判定して色を付けています。
ボタン２を押すと色がクリアされます。

上記サンプルのコードです。

<input type="text" class="text1" value="23" maxlength="2">
<input type="text" class="text1" value="11" maxlength="2">
<input type="text" class="text1" value="20" maxlength="2">
<input type="text" class="text1" value="33" maxlength="2">
<input type="text" class="text1" value="12" maxlength="2">
<input type="button" id="button1" value="ボタン1" />
<input type="button" id="button2" value="ボタン2" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
	$("#button1").click(function(){
		const num1 = 15;

		$(".text1").filter(function() {
			return $(this).val() > num1;
		}).css("background","LightBlue");
	});

	$("#button2").click(function(){
		$(".text1").css("background","white");
	});
});
</script>

14行目は、filterメソッドです。
15行目は、関数で要素をフィルタリングしています。各要素について、関数がtrueを返す場合、その要素は対象として残ります。関数がfalseを返す場合、その要素は除外されます。
16行目は、14,15行目で絞られた対象に対してcssメソッドで色を付けています。