each()の使い方いろいろ

2011.01.10 2:11
 jqueryの使用でいつもひっかかるのがeach()なので、ここでいろいろと使い方をまとめておきたいと思います。一括で処理したりループさせたりするのに便利なeach()ですが、単体では何もできないので、その使い方の肝みたいなところをちょっと勉強してみたいと思います。

基本的な形式

$().each(<callback>)

$.each (<object>, <callback>)
があります。これにはしばらくの間私自身も頭の中が静かに混乱しました。これ全然違う関数だと思っておいた方がいいです。
 前者は主にhtmlなどのDOMの共通要素に順に働きかけてゆくもの[参照]で、後者は配列やオブジェクトにアクセスする汎用関数[参照]という風に覚えておいた方がいいです。なんだかわからりずらい感じではありますが、便利なので強引に覚えましょう。
 ややこしい説明になりますが、$().each()の場合はcallbackが常に一つで、セレクタでアクセスしたDOM要素そのものが一つ返ってくるだけです。たいていの場合このcallbackはループ中の処理をfunctionで行うことになると思います。に対して$.each()では指定した配列やオブジェクトに対してcallbackが二つ返ってきます。それは配列やオブジェクト特有のインデックスとヴァリュー(添字と値)なわけです。勿論これらは概念的にみてcallbackが一つだとか二つだとかという話であって実際は様々なものをいくらでも取り出せるわけですが...。説明というのもわかりづらいものなのでその用例です。

二つのeach()の決定的な違いの解説

 いずれにしろeachはループみたいな作業をするので共通要素を取り出して何某をするというのは非常に得意です。この例ではinputタグからアトリビュートを取得してその情報を配列に入れちゃうというものです。Sample
jQuery code:
var array_id = [];
$(function(){
    $("input").each(function(){
        //$(this).before("label"+i);
        var attr_id = $(this).attr("id");
        var attr_name = $(this).attr("name");
        var str = attr_id + '<>' + attr_name;
        array_id.push(str);
    });
});

$(function(){
    $("form").submit(function(){
        $.each(array_id, function(key, value){
             $("#disp").append(key + ":" + value).append('<br />');
        });
        return false;
    });
});
html code:
<form id="form">
    <input type="text" name="name" id="name" value="osamu" /><br />
    <input type="text" name="adress" id="adress" value="Japan" /><br />
    <input type="text" name="tel" id="telphone" value="03xxxxxxxx" /><br />
    <input type="text" name="email" id="email" value="omnioo@omnioo.com" /><br />
    <input type="submit" name="on" id="on" value="実行" /><br />
</form>
<div id="disp"></div>
 まずは、話が前後してしまうことを了承して頂いて、inputの要素を取得するところからはじめたいと思います。これは$().each()の形式で行います。当然ながらセレクタは"input"でinputタグにアクセスできます。通常なら単品のinputタグということになるのですが、eachでループさせてやるとすべてのinput要素を取得できます。これは、もう一つの形式として、
$(<セレクタ>).each(function() {
...それぞれの処理...
});
という風に覚えておいた方がいいですね。ここではinputのアトリビュートのnameとidの値を取得しています。inputのループ中なのでセレクタはthisで、つまり、$(this).attr("name");で取得できます。
 ここで、この取得した値をあらかじめ作成しておいた配列にpushしてやります。idとnameの値をまとめて結合させて配列に入れちゃいます。これで配列に取得した値を保存することができます。
 次にこの保存された配列の値を表示させることにします。表示のタイミングとしてはsubmitイベントで行っていますが、ここでは特に必要ないです。表示させるための肝は、$.each(array_id, function(key, value){});なのです。この形式はphpやperlなどのforeach ($array_id as $key=>$value) {}を思い出させるものがあります。これは、先ほどpushした配列(array_id)をセットしてそのインデックス(キー?)と値とを取り出しているという感じです。(私的に違和感があるのは、keyとvalue変数の宣言ってしないのに機能することです。ローカライズされている...ということなのでしょうか?ここら辺りが自分もよくわかりません。)で、これらは一つの形式として覚えてしまえばいいと思います。
$.each(<配列>, function(<index or key>, value) {
   ...なんらかの処理...
});
いわゆる連想配列なんかも同様にこの関数でOKです。
 ここでは表示領域をid="disp"で確保してappendでもって表示させている感じです。これでもってinputから取得したアトリビュートを配列に保存して、再度その配列を表示させることができたわけです。






プロフィール



  • Name :: 山上オサム ♂(39)
  • Hobby :: 武術
  • Work :: Web Designer