今回は、今更ながら each の使い方を再考してみます。
each には2種類の使い方があります。 ひとつは jQuery の セレクタ に対してのものと、もう一つは配列やコレクションやオブジェクトに対するものです。
共にそれぞれが内部に持っているものに対して、順次処理を行うことでは似た感じです。
先ずは jQuery の セレクタ に対しての each の書き方ですが、以下の様になります。
$('セレクタ名').each(function([index[, element]]) {
// index : 各要素のインデックス番号(値は 0 から始まる)
// element : 繰り返し処理中の要素を参照
各要素に関する処理;
});
これを使った例として以下に HTML ファイル側のソースを示します。
■each を使った例
<html>
<head>
<meta charset="utf-8">
<title>test checkbox</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//TEST関数
function testEach() {
$('li').each(function(index, element) {
console.log(index + ':' + $(element).text());
});
}
</script>
</head>
<body>
<h2>test each 1</h2>
<li>ラベル1</li>
<li>ラベル2</li>
<li>ラベル3</li>
<br />
<button onclick="javascript:testEach();">TEST</button>
</body>
</html>
9行目の .each(function(index, element) { ... }); で each 処理を行っています。
処理は要素の index と element で取得できるテキスト値をコンソールに出力しています。（以下の様になります。）
0: ラベル1 1: ラベル2 2: ラベル3
each の処理で index と element を記述せずに以下の様にしても、同様な処理が行えます。
以下の例では element の代わりに this を使っています。 特に index を使う必要が無ければ、いつもは this で記述することが多いです。
この this ですが、each の繰り返しの処理の中で、現在のセレクタ？（オブジェクト）を指し示す変数みたいなものと考えて良いと思います。
<html>
<head>
<meta charset="utf-8">
<title>test checkbox</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//TEST関数
function testEach() {
$('li').each(function() { // index , elemnt を省略
console.log($(this).text());
});
}
</script>
</head>
<body>
<h2>test each 2</h2>
<li>ラベル1</li>
<li>ラベル2</li>
<li>ラベル3</li>
<br />
<button onclick="javascript:testEach();">TEST</button>
</body>
</html>
この例から少し発展させて <li> 要素がクリックされた時に、クリックされたラベル以外の文字列を表示する様に変更します。
<html>
<head>
<meta charset="utf-8">
<title>test checkbox</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
// 初期処理
$(function(){
// li 要素のクリック時の処理
$('li').on('click', function() {
// クリック時の[this]退避
var this_click = this;
// li 要素の全てを処理
$('li').each(function() {
if (this_click != this) {
// クリック以外のラベル
console.log($(this).text());
}
});
});
});
</script>
</head>
<body>
<h2>test each 2</h2>
<li>ラベル1</li>
<li>ラベル2</li>
<li>ラベル3</li>
</body>
</html>
それでは、配列やコレクションやオブジェクトに対する each について説明します。 構文的には以下の様になります。
$.each(collection, function(index, value) {
// collection : each処理の対象となる配列またはオブジェクト
// function : 各繰り返し処理で実行したい関数を指定
// index : 配列であればインデックス番号、オブジェクトであればkey
// value : 繰り返し処理中の値
各要素に関する処理;
});
$.each で宣言された関数の中で、引数である index, value を利用することが出来ます。
以下に、配列データとオブジェクトの中身を全てコンソールに出力する例を示します。
■配列やコレクションやオブジェクトに対する each 例
<html>
<head>
<meta charset="utf-8">
<title>test checkbox</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//TEST関数
function testEach() {
// 配列
var arr = ['A001', 'B002', 'C003'];
$.each(arr, function(index, value) {
console.log('index(' + index + ') = ' + value);
});
// オブジェクト
var obj = {
'key1' : 'A001',
'key2' : 'B002',
'key3' : 'C003'
};
$.each(obj, function(index, value) {
console.log('index(' + index + ') = ' + value);
});
}
</script>
</head>
<body>
<h2>test each 5</h2>
<button onclick="javascript:testEach();">TEST</button>
</body>
</html>
コンソールの出力は以下の様になります。オブジェクトの場合 index にキーが渡されることがわかります。
index(0) = A001 index(1) = B002 index(2) = C003 index(key1) = A001 index(key2) = B002 index(key3) = C003
今回の例でも、 index, value を記述せずに this を使うことが出来ます。
■配列やコレクションやオブジェクトに対する each 例
<html>
<head>
<meta charset="utf-8">
<title>test checkbox</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//TEST関数
function testEach() {
// 配列
var arr = ['A001', 'B002', 'C003'];
$.each(arr, function() {
console.log(this.valueOf()); // [PrimitiveValue]の値
//console.log(this + ""); // この方法でもOK
});
// オブジェクト
var obj = {
'key1' : 'A001',
'key2' : 'B002',
'key3' : 'C003'
};
$.each(obj, function() {
console.log(this.valueOf()); // [PrimitiveValue]の値
//console.log(this + "");
});
}
</script>
</head>
<body>
<h2>test each 6</h2>
<button onclick="javascript:testEach();">TEST</button>
</body>
</html>
$.each の中の this にはオブジェクト型で渡されるため、その中の値を取得するには this.valueOf とします。
この方法は面倒なので、一つ前の index, value を用いる方法が良いと思います。
最後に、繰返し処理のなかで for 文の break, continue の様な処理に付いて説明します。
以下の例では、6件の配列データを宣言し、2番目までは処理を continue し、5番目以降で break する処理を行います。
■配列に対する each 処理での break, continue 例
<html>
<head>
<meta charset="utf-8">
<title>test checkbox</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//TEST関数
function testEach() {
// 6件の配列
var arr = ['A001', 'B002', 'C003', 'D004', 'E005', 'F006'];
$.each(arr, function(index, value) { // indexは[0]から始まることに注意!!
if (index <= 1) {
// 2番目までは処理をcontinue
return true;
}
if (index >= 4) {
// 5番目以降でbreak
return false;
}
console.log('index(' + index + ') = ' + value);
});
}
</script>
</head>
<body>
<h2>test each 6</h2>
<button onclick="javascript:testEach();">TEST</button>
</body>
</html>
コンソールの出力は以下の様になります。
index(2) = C003 index(3) = D004
関連する記事
⇒JavaScript 何に使う⇒JavaScript jQueryの使い方（セレクタ）
⇒JavaScript jQueryの使い方（セレクタ）その２
⇒JavaScript 関数の宣言について(function)
⇒JavaScript jQueryでJavascriptファイルの動的に変更する方法
コメント