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. JavaScript

    とても簡単にクールなドロップダウンを実装できるjQueryプラグイン「DropKick」

    個人的に使いやすそうだったので備忘録です。DropKickというjQu…

  2. CollagePlus

    JavaScript

    画像を綺麗に整列させるjQueryプラグイン「CollagePlus」

    画像を綺麗に整列させる便利なjQueryプラグイン「CollagePl…

  3. no-image

    JavaScript

    オーバーレイによるシンプルなアラートを実装できるjQueryプラグイン「simplert」

    simplertはオーバーレイによるシンプルで美しいアラートを実装する…

  4. Animated Weather Cards

    JavaScript

    シンプルでお洒落なアニメーションつき天気予報「Animated Weather Cards」

    お洒落なアニメーションがついた天気予報カード「Animated Wea…

  5. JavaScript

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Shadow Plugin

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Sh…

  6. CSS Jquery Pie Countdown Timer

    JavaScript

    グラデーションが美しい円形カウントダウン「CSS Jquery Pie Countdown Time…

    円形によるカウントダウンのタイマーを実装する「CSS Jquery P…

コメント

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

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

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP