jQueryのeachで配列やオブジェクトをループする
どんな言語でも、繰り返し処理をする時はループを使うとプログラムが大変シンプルになります。jQueryのループ方法の一つ、eachの使い方をまとめました。
jQueryのeachは2種類存在します。jQueryに用意されているeachと、jQueryオブジェクトとして用意されているeachです。早速使い方を見てみましょう。
目次
１．eachの使い方
まずはjQueryに用意されているeachの使い方です。
基本的な書き方は、以下になります。
$.each( collection, callback(index, value) )
collectionには繰り返し処理を行う配列やオブジェクトを指定します。
indexにはインデックス番号やkey,valueには繰り返し処理中の値が入ります。
１-１．配列をループする
最も利用頻度が高い、配列をループするサンプルです。
<script>
//ループ対象の配列
var array = ['book1', 'book2', 'book3', 'book4', 'book5'];
$.each(array, function(index, value) {
console.log(value);
})
</script>このプログラムのコンソール出力結果は、以下になります。
book1 book2 book3 book4 book5
コールバック関数は引数を入れずに書くこともできます。その場合、値は「this」で指定します。
ただ、thisにはオブジェクトが入るため、文字列と認識させるための工夫は必要です。
<script>
//ループ対象の配列
var array = ['book1', 'book2', 'book3', 'book4', 'book5'];
$.each(array, function() {
//※文字列と結合し、String型と認識させる
console.log("名称：" + this);
})
</script>１-２．オブジェクト（連想配列）をループする
配列が連想配列（オブジェクト）に代わっても問題ありません。
<script>
//ループ対象の配列
obj = {
name: 'book1',
price: 10000,
theme: 'Programmming'
};
$.each(obj, function(index, value) {
console.log(index + ': ' + value);
})
</script>出力結果は以下になります。
name: book1 price: 10000 theme: Programmming
１-３．多次元配列をループする
多次元配列もeachによってループ処理ができます。APIなどで取得したJSONを処理する場合にも使えます。
<script>
// 処理対象のオブジェクト配列
var books = [
{ name: 'book1', price: 10000, theme: 'programming' },
{ name: 'book2', price: 5000, theme: 'art' },
{ name: 'book3', price: 7500, theme: 'science' },
{ name: 'book4', price: 12000, theme: 'mathmatical' },
{ name: 'book5', price: 3000, theme: 'language' }
];
// 配列booksを順に処理
$.each(books,
function(index, val) {
console.log('名称：' + val.name + ' 値段：' + val.price + ' ジャンル：' + val.theme);
}
);
</script>出力結果は以下になります。
名称: book1 値段: 10000 ジャンル: programmming 名称: book2 値段: 5000ジャンル: art 名称: book3 値段: 7500ジャンル: science 名称: book4 値段: 12000ジャンル: mathmatical 名称: book5 値段: 3000ジャンル: language
２．jQueryオブジェクト.eachの使い方
jQueryオブジェクトのeachは、以下のようにWebページ上に複数、同じ条件のオブジェクトが存在する場合にの処理に最適です。
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>まずは基本的な書き方です。前項のjQuery.eachとはやや異なるので注意してください。
jQueryオブジェクト.each( function(index, Element) )
indexにはインデックス番号、Elementには参照中の要素が入ります。
それでは、上記のHTMLに対してeachでループを回してみます。
$('li').each(function(index, element) {
console.log(index);
console.log($(element).text());
})リストの中身が表示されました。
0 HTML 1 CSS 2 JavaScript
コールバック関数の引数を省略した場合はこちらも「this」に参照中の要素が入ります。
通常のJQueryオブジェクトと同様の書き方で、加工や属性の取り出しができます。
$('li').each(function() {
console.log($(this).text());
})３．ループの終了やスキップの注意点～breakとcontinue～
JQueryのeachには、他のプログラム言語に見られるような「break」や「continue」はありません。
「break」の代わりに「return false」、「continue」の代わりに「return true」を使用します。
３-１．ループを終了する
まずはループを抜けるための「return false」の使い方から見てみましょう。
//処理対象の配列
var array = ['book1', 'book2', 'book3', 'book4', 'book5'];
$.each(array, function(index, value) {
//4冊め以降は表示させないようにループを抜けます。
if(index === 3)
{
return false;
}
console.log(value);
})３-２．ループをスキップする
次はループをスキップするための「return false」の使い方です。
//処理対象の配列
var array = ['book1', 'book2', 'book3', 'book4', 'book5'];
$.each(array, function(index, value) {
//4冊目だけ表示させません
if(index === 3)
{
return true;
}
console.log(value);
})尚、「return false」「return true」の使い方はjQueryオブジェクト.eachでも同様です。
４．まとめ
以上、jQueryでのeachの使い方でした。
引数にコールバック関数が入ったり、breakやcontinueが使えなかったりと、他のプログラム言語とやや勝手が違って難しいですね。しかし、入力チェックやJSONデータの処理など活躍の機会は多いので、ぜひ何も見ずに書けるようになりたいものです。
コメント