jQuery 関数でフィルタリングするサンプル(filter)

jQueryの関数でフィルタリングするサンプルです。
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/1.12.4/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メソッドで色を付けています。

filterメソッド

jQueryのfilterメソッドです。
関数で要素をフィルタリングできます。
以下はjQueryサイトのfilterメソッドのfunctionのリンクです。
http://api.jquery.com/filter/#filter-function