jQueryのeachと$.eachの簡単な使い方のメモ

jQueryのeachと$.eachの使い方のメモです。あんまり深い知識はないので簡単な使い方ですが。。基本的にはeachは指定した要素を繰り返し処理してくれるのに対し、$.eachは配列やオブジェクトを指定して1つずつ処理してくれます。例えば、ある親要素の子要素を指定してeachで1つずつ配列に格納して、その配列を$.eachで処理したりといったこともできますね。こんな使い方でいいのかわかりませんが。以下サンプルコードです。

[ads_center]

eachと$.each

こんな感じのマークアップがあったとします。

<div id="sample">
    <p>sample</p>
    <p>sample</p>
    <p>sample</p>
    <p>sample</p>
</div>

で、eachを使って#sampleの子要素pに順番をつけて、配列を作りたい場合は以下のようにしてあげるといいかもしれません。

var array1 = [];
$('#sample p').each(function(i){
    text = $(this).text() + (i + 1);
    array1.push(text);
});
alert(array1);

// 実行結果 sample1,sample2,sample3,sample4

ちゃんと配列に入ってますね。次にその配列を$.eachを使って処理をしていきます。ここでは#sample内にul要素を新たに生成して、リスト化してみました。

$('<ul />').appendTo("#sample");
$.each(array1, function(i, text){
    $('<li />').text((i + 1) + "番目: ").appendTo('ul');
    $('<a />').attr('href', text).text(text).appendTo($('li').eq(i));
});

// 実行結果
// <ul>
//     <li>1番目: <a href="sample1">sample1</a></li>
//     <li>2番目: <a href="sample2">sample2</a></li>
//     <li>3番目: <a href="sample3">sample3</a></li>
//     <li>4番目: <a href="sample4">sample4</a></li>
// </ul>

$.eachは配列だけじゃなくてオブジェクトも処理できます。以下はobjに入っているキーをdt、値をddとして、それを新しく生成したdl内に1つずつ入れていくサンプルです。

var obj = {
    key1: "aaa",
    key2: "bbb",
    key3: "ccc",
    key4: "ddd"
}
$('<dl />').appendTo('#sample');
$.each(obj, function(i, text){
    $('<dt />').text(i).appendTo('dl');
    $('<dd />').text(text).appendTo('dl');
});

// 実行結果
// <dl>
//     <dt>key1</dt><dd>aaa</dd>
//     <dt>key2</dt><dd>bbb</dd>
//     <dt>key3</dt><dd>ccc</dd>
//     <dt>key4</dt><dd>ddd</dd>
// </dl>

終わり。