JQueryでAjaxを利用する(2)

参考
http://ascii.jp/elem/000/000/458/458236/

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

[jQueryでAjaxを利用する(1)]では、セレクターを指定した内容に対して折り返し処理をするeach()という命令が登場しました。jQueryを使ったプログタムでは良く利用する命令です。
　
each()は、以下のような書き方で使用します。

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

折り返し処理とはどういったものなのでしょうか、table要素のサンプルを使って説明しましょう。

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

sample4(実行結果)

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

　単純にtr要素をjQueryのセレクターで指定すると$("table tr")ですが、このセレクターではtable要素内のすべてのtr要素を一括して選択しています。sample4の実行結果のように、複数のtr要素を１つずつ異なる内容に書き換えるといったことはできません。
　
　これに対してeach()は、セレクターで指定した要素が複数含まれる場合に、その要素を１つずつ取り出して、function(){...}内の命令を１回ずつ、含まれる要素の回数だけ実行していきます。
　
sample4(スクリプト)

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

　each()と一緒に利用する「this」は、「現在処理をしている要素」を表します。htisはclickイベントの処理でも登場したが、意味が少し違います。たとえば、$(this).html(...)と記述した場合は、現在処理をしている要素の中身を別のHTMLに書き換えます。
　jQueryのセレクターの後ろには,(カンマ)区切りで範囲を絞り込めます。each(function(){...})でセレクターの範囲にthisを指定することで、現在処理をしている要素の内側の要素を指定できます。