検索
連載

第4回 要素の操作&ユーティリティ編連載:jQuery逆引きリファレンス(11/19 ページ)

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

Share
Tweet
LINE
Hatena



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 $.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メソッドは配列や一般的なオブジェクトを処理できます。

Copyright© Digital Advantage Corp. All Rights Reserved.

ページトップに戻る