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. GRT Responsive Menu
  2. Radial SVG Slider

    JavaScript

    放射状に切り替わるスライダーを実装できる「Radial SVG Slider」

    Radial SVG Sliderは、放射状に広がりながら切り替わるス…

  3. JavaScript

    レスポンシブなテキストを実装できるjQueryプラグイン「Responsive Text」

    Responsive TextというjQueryプラグインを使えば、と…

  4. Listt

    JavaScript

    リストをiOSのようにアニメーションできるjQueryプラグイン「Listt」

    ListtはリストをiOSのセレクトボックスのようにアニメーションさせ…

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

    JavaScript

    jQueryの基本的なanimateメソッドを使って適当に遊んでみる

    jQueryのanimateメソッドを使えば自分で好きなようにアニメー…

  6. Slinky

    JavaScript

    モバイルライクなナビゲーションメニューを実装できる「Slinky」

    Slinkyは軽量でレスポンシブに対応したモバイルライクなナビゲーショ…

コメント

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

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

最近の記事

  1. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  2. ブラジルイパネマ
  3. 梅しば
  4. BM-IBCDH13RD

アーカイブ

PAGE TOP