jQueryの使い方を徹底解説!

jQueryのeachで配列やオブジェクトをループする

ENGINEER.CLUB編集部

どんな言語でも、繰り返し処理をする時はループを使うとプログラムが大変シンプルになります。jQueryのループ方法の一つ、eachの使い方をまとめました。

jQueryのeach2種類存在します。jQueryに用意されているeachと、jQueryオブジェクトとして用意されているeachです。早速使い方を見てみましょう。


1.eachの使い方

まずはjQueryに用意されているeachの使い方です。

基本的な書き方は、以下になります。

$.each( collection, callback(index, value) )

collectionには繰り返し処理を行う配列やオブジェクトを指定します。

indexにはインデックス番号やkey,valueには繰り返し処理中の値が入ります。

1-1.配列をループする

最も利用頻度が高い、配列をループするサンプルです。

<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>

1-2.オブジェクト(連想配列)をループする

配列が連想配列(オブジェクト)に代わっても問題ありません。

<script>

//ループ対象の配列
 obj = {
    name: 'book1',
    price: 10000,
  theme: 'Programmming'
};
 
$.each(obj, function(index, value) {
 
    console.log(index + ': ' + value);
 
})
    
</script>

出力結果は以下になります。

name: book1
price: 10000
theme: Programmming

1-3.多次元配列をループする

多次元配列も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

2.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());
 
})

3.ループの終了やスキップの注意点~breakcontinue

JQueryのeachには、他のプログラム言語に見られるような「break」や「continue」はありません。

break」の代わりに「return false」、「continue」の代わりに「return true」を使用します。

3-1.ループを終了する

まずはループを抜けるための「return false」の使い方から見てみましょう。

//処理対象の配列
var array = ['book1', 'book2', 'book3', 'book4', 'book5'];
 
$.each(array, function(index, value) {

 //4冊め以降は表示させないようにループを抜けます。
 if(index === 3)
 {
     return false;
 }
 
    console.log(value);
 
})

3-2.ループをスキップする

次はループをスキップするための「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でも同様です。


4.まとめ

以上、jQueryでのeachの使い方でした。

引数にコールバック関数が入ったり、breakcontinueが使えなかったりと、他のプログラム言語とやや勝手が違って難しいですね。しかし、入力チェックやJSONデータの処理など活躍の機会は多いので、ぜひ何も見ずに書けるようになりたいものです。

私たちは、全てのエンジニアに市場価値を高め自身の望む理想のキャリアを歩んでいただきたいと考えています。もし、今あなたが転職を検討しているのであればこちらの記事をご一読ください。理想のキャリアを実現するためのヒントが見つかるはずです。

『技術力』と『人間力』を高め市場価値の高いエンジニアを目指しませんか?

私たちは「技術力」だけでなく「人間力」の向上をもって遙かに高い水準の成果を出し、関わる全ての人々に感動を与え続ける集団でありたいと考えています。

高い水準で仕事を進めていただくためにも、弊社では次のような環境を用意しています。

  • 定年までIT業界で働くためのスキル(技術力、人間力)が身につく支援
  • 「給与が上がらない」を解消する6ヶ月に1度の明確な人事評価制度
  • 平均残業時間17時間!毎週の稼動確認を徹底しているから実現できる働きやすい環境

現在、株式会社ボールドでは「キャリア採用」のエントリーを受付中です。

まずは以下のボタンより弊社の紹介をご覧いただき、あなたの望むキャリアビジョンをエントリーフォームより詳しくお聞かせください。

コメント

文系IT未経験歓迎!【23卒対象】新卒採用のエントリーを受付中!
文系IT未経験歓迎!
【23卒対象】新卒採用のエントリーを受付中!