Web制作の現場で使えるjQuery　UIデザイン入門 ― 第10回

jQueryでAjaxを利用する基本チュートリアル (4/4)

【jQueryステップアップメモ】

セレクターの内容に繰り返し処理をするeach()

　ajax()のサンプルでは、セレクターで指定した内容に対して繰り返し処理をする each() という命令が登場しました。jQueryを使ったプログラムではよく利用する命令ですので、使い方を覚えておきましょう。

　each()は、以下のような書き方で使用します。

$(セレクター).each(function(){
    //繰り返し処理
})

　そもそも繰り返し処理とはどういったものなのでしょうか？　table要素のサンプルを使って説明しましょう。以下のHTMLを見てください。

▼サンプル04（HTML部分）

<table>
    <tr><th>text(...)</th><td>テキストを変更する</td></tr>
    <tr><th>html(...)</th><td>HTMLを変更する </td></tr>
    <tr><th>prepend(...)</th><td>要素内の先頭にHTMLを挿入する</td></tr>
    <tr><th>append(...)</th><td>要素内の最後にHTMLを挿入する</td></tr>
    <tr><th>before(...)</th><td>要素の前にHTMLを挿入する</td></tr>
    <tr><th>after(...)</th><td>要素の後にHTMLを挿入する</td></tr>
</table>

　このtable要素をjQueryを使って以下のように書き換えたいとします。

▼サンプル04（実行結果）

<table>
    <tr><td>text(...)はテキストを変更する</td></tr>
    <tr><td>html(...)はHTMLを変更する </td></tr>
    <tr><td>prepend(...)は要素内の先頭にHTMLを挿入する</td></tr>
    <tr><td>append(...)は要素内の最後にHTMLを挿入する</td></tr>
    <tr><td>before(...)は要素の前にHTMLを挿入する</td></tr>
    <tr><td>after(...)は要素の後にHTMLを挿入する</td></tr>
</table>

　tr要素の中にあるth要素とtd要素のテキストを「は」というテキストで結合し、td要素で包み直しています。

　単純にtr要素をjQueryのセレクターで指定すると $("table tr") ですが、このセレクターではtable要素内のすべてのtr要素を一括して選択してしまいます。サンプル04の実行結果のように、複数のtr要素を1つずつ異なる内容に書き換えるといったことはできません。

　これに対してeach()は、セレクターで指定した要素が複数含まれる場合に、その要素を1つずつ取り出して、function(){...} 内の命令を1回ずつ、含まれる要素の回数だけ実行していきます。

▼サンプル04（スクリプト部分）

$("table tr").each(function(){
    $(this).html("<td>"+$("th",this).text()+"は"+$("td",this).text()+"</td>");
})

　each()と一緒に利用する「this」は、「現在処理をしている要素」を表します。thisはclickイベントの処理（関連記事)でも登場しましたが、意味が少し違います。たとえば、$(this).html(...) と記述した場合は、現在処理をしている要素の中身を別のHTMLに書き換えます。

　また、前ページの本文でも触れたとおり、jQueryのセレクターの後ろには ,(カンマ)区切りで範囲を絞り込めます。each(function(){...})でセレクターの範囲にthisを指定することで、現在処理をしている要素の内側の要素を特定できます。

著者：西畑一馬（にしはた かずま）

to-R代表、Webクリエイター。PHPによるシステム開発や、CMSを利用したWebサイト制作、SEO対策などのマーケティング、コンサルティング、Webクリエイター向けの講座などを業務で行なっている。また、ブログto-RではJavaScriptやSEO対策、CSS、Movable TypeなどのWeb制作にかかわるさまざまな情報を発信している。
主な著書に「現場のプロから学ぶXHTML+CSS」（共著、毎日コミュニケーションズ刊）がある。