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>

終わり。

jQueryでウィンドウサイズによって処理を変えるjQuery(JavaScript)で指定した要素の子要素数や最大文字数を配列内から取得する前のページ

jQueryで$.inArrayを使えば配列の中に指定した値が何番目に入ってるか知ることができる次のページjQueryでウィンドウサイズによって処理を変える

関連記事

  1. diamonds.js
  2. Animated Heat Distortion Effects with WebGL

    JavaScript

    陽炎のような揺れを表現できる「Animated Heat Distortion Effects wi…

    夏の暑い日などによく見かける「陽炎」のようなエフェクトを実装することが…

  3. gridslide.js

    JavaScript

    いろんな方向に画像をスライドできるjQueryイメージスライダー「gridslide.js」

    gridslide.jsはいろんな方向に画像をスライドさせることができ…

  4. Sal.js

    JavaScript

    Vanilla JSによる軽量のスクロールアニメーションライブラリ「Sal.js」

    Sal.jsは軽量のスクロールアニメーションを実装できるライブラリです…

  5. waslidemenu
  6. Bootstrap Carousel Touch Slider with Text Animation

コメント

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

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

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP