jQueryでウィンドウサイズによって処理を変える

JavaScript

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>

終わり。

関連記事

  1. jQuery RS Carousel

    JavaScript

    レスポンシブ対応のシンプルなカルーセルを実装できる「jQuery RS Carousel」

    レスポンシブ対応のシンプルなカルーセルを実装できるjQueryプラグイ…

  2. jquery.xtr

    JavaScript

    クライアントサイドで変換してくれる「jquery.xtr」

    jquery.xtrはページのリフレッシュなしにクライアントアイドでテ…

  3. Nivo Zoom

    JavaScript

    Lightbox風に画像をズームして表示させるjQueryプラグイン「Nivo Zoom」

    Lightbox風に画像をズームして表示させるjQueryプラグイン「…

  4. Dialogify

    JavaScript

    カスタマイズできるダイアログ・ライトボックスを作成できる「Dialogify」

    Dialogifyはカスタマイズできるダイアログやライトボックスなどを…

  5. baffle.js

    JavaScript

    DOM要素内のテキストを難読化させて読めるようにする「baffle.js」

    baffle.jsは、DOM要素内のテキストを暗号化して難読化させ、さ…

  6. JavaScript

    要素の位置までスクロールしてスピード設定もできるjQueryプラグイン「scrollToBySpee…

    scrollToBySpeedは指定した要素の位置までスクロールしてく…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. 三菱ブレッドオーブン
  2. 浜離宮恩賜庭園

アーカイブ

PAGE TOP