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

jQueryの関数でフィルタリングするサンプルです。
filterメソッドを使用します。

目次

関数でフィルタリングするサンプル

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

コード

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

<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 属性値を取得/設定するサンプル(attr)
jQuery textメソッドとhtmlメソッドの違いのサンプル
jQuery ループ処理を行うサンプル(each)
jQuery 子孫要素を検索するサンプル(find)
jQuery 指定のイベント発生時に一度だけ実行するサンプル(one)
jQuery 1つの要素に複数のイベントリスナを登録するサンプル(on)

△上に戻る