第4回 要素の操作＆ユーティリティ編：連載：jQuery逆引きリファレンス（11/19 ページ）

要素セットに対して要素の追加／置換／削除などを行うためのメソッドと便利なユーティリティ機能をまとめた、すぐに役立つ18本を一挙公開。

[山田祥寛（http://www.wings.msn.to/），著]

連載目次

　$.eachメソッドは、引数objで指定されたオブジェクト（ハッシュ）、または配列の内容を、コールバック関数fncにより順に処理します。

　コールバック関数fncは、以下のような性質を持ちます。

• 第1引数は、オブジェクト（ハッシュ）のキー、または配列のインデックス番号を受け取る
• 第2引数は、オブジェクト／配列の個々の値を受け取る
• 戻り値としてfalseを返した場合、その場で繰り返し処理を中止（それ以外の値を返した場合には無視）

　それでは、具体的な例を見てみましょう。以下のサンプルは、配列booksの内容を順にリスト表示します。ただし、categoryキーが「ASP.NET」以外のものが登場したところで処理を打ち切ります。

<script type="text/javascript">

$(function() {

  // 書籍情報を配列booksに格納
  var books = [
    { title: 'ASP.NET MVC実践プログラミング',
      category: 'ASP.NET' },
    {title: '10日でおぼえるASP.NET 3.5入門教室',
      category: 'ASP.NET' },
    { title: '基礎Perl',
      category: 'Perl' },
    { title: 'ASP.NET AJAXプログラミング',
      category: 'ASP.NET' }
  ];

  // 配列booksの内容を順に処理
  $.each(
    books,
    function(key, value) {

      // categoryキーが"ASP.NET"以外の場合、処理を打ち切り
      if (value.category != 'ASP.NET') { return false; }

      $('<li></li>'). // <li>要素を生成
        append(value.title). // 配下にtitleキーの値を追加
        appendTo('ul#target'); // <li>要素を<ul>要素配下に追加
    });
});

</script>

  ……中略……

<ul id="target">
</ul>

リスト070 配列booksの内容を順にリスト表示（Each.htm）
このHTMLを実際にブラウザで開く

ブラウザで開く

リスト070の実行結果

　$.eachメソッドは、インスタンス・メソッドeachと似ていますが、eachメソッドがjQueryオブジェクトを対象としているのに対して、$.eachメソッドは配列や一般的なオブジェクトを処理できます。