ywork2020.com

Title

配列の全ての要素を関数でテストする

目次 (INDEX)

everyとは

ここで説明する every とは次の語句からなるjQueryのメソッドです。
every
読み: エブリー
意味: あらゆる、全ての

目次に戻る

everyメソッドの概要

このメソッドは、配列の各要素(各値)を関数で実装された判定に掛けて合格するかを試行します。

メソッドの戻り値は真偽値で、全ての要素が判定に合格すればtrueを返し、不合格ならばfalseを返します。

これは、javascript の every() と同じ結果を返します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

  • callback: 各要素(各値)に対して実行するコールバック関数です。引数は1つからオプションを含め3つまで受け付けます。
  • value: 現在処理されている配列の要素(値)です。
  • index: 現在処理されている配列のインデックス番号です。
  • array: 呼び出し元の配列の全要素(全の値)です。
  • ThisArg: callback内で this として使用する値です。
var boolean = Array.every(callback(value[, index[, array]])[, ThisArg])

目次に戻る

サンプルコードと実行結果

ここでは2つのサンプルを用意しました。 とちらも li 要素の class属性の値を every() を使って評価します。

サンプルコード: CSS
<style>
	.clsA{
		background-color: ##lightblue;
	}
	.clsB{
		background-color: ##lightpink;
	}
</style>
  • 02-04: .clsA (class="clsA" の要素の背景色をライトブルーに設定します。)
  • 05-07: .clsB (class="clsB" の要素の背景色をライトピンクに設定します。)
サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<ul>
		<li class ="clsA">listText clsA</li>
		<li class ="clsA">listText clsA</li>
		<li class ="clsA">listText clsA</li>
	</ul>
	<button id="idButton">Click</button>
	<script>...</script>
</body>
  • 07,08,09: li (li 要素です。各要素には class属性を付けています。)
  • 注意: (ここでは2つのサンプルを用意しており、上記のコードは「実行結果1」のコードです。 「実行結果2」では 08:行目の要素に class="clsB" を設定しています。)
サンプルコード: script
<script>
	$("#idButton").click(function(){
		$(this).text(
			$.makeArray($("li")).every((value, index, array) =>{
				return $(value).prop("class") == "clsA";
			})
		).attr("disabled", true);
	});
</script>
  • 02-08: $("#idButton").click(function(){処理}) (id="idButton" の要素がクリックされると 処理 を実行します。)
  • 03: $(this) (function の呼び出し元の要素を表します。ここでは $("#idButton") のことです。)
  • 03-07: text() (呼び出し元の要素のテキストを設定します。)
  • 04: makeArray($("li")) (li 要素を配列として扱います。)
  • 04-06: (value, index, array) => {関数の処理} (li 要素の配列の各値に関数を実行します。)
  • 05: return $(value).prop("class") == "clsA"; (配列内の各要素のクラス属性値が "clsA" であるか評価しています。この判定に全ての要素が通過すれば、結果は true を返します。また、この判定に一つでも通過できない要素があれば、結果は false を返します。)
実行結果 1:
  • listText clsA
  • listText clsA
  • listText clsA
実行結果 2:
  • listText clsA
  • listText clsB
  • listText clsA

目次に戻る