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

jQueryのfilterメソッドで要素を絞り込んで処理を行うサンプルです。

目次

filterメソッド

  • jQueryのfilterメソッドです。
  • 関数で要素を絞り込んで処理を行います。
  • 以下はjQueryサイトのfilterメソッドのリンクです。
    https://api.jquery.com/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/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メソッドで色を付けています。

関連の記事

jQuery 属性値を取得/設定/削除する(attr/removeAttr)
jQuery textメソッドとhtmlメソッドの違いのサンプル
Query 繰り返し処理を行うサンプル(each)
jQuery findメソッドで子孫要素を操作する
jQuery oneメソッドで一度だけ実行する
jQuery onで複数のイベントリスナを登録

△上に戻る