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

JavaScript

jQueryでJavaScriptのfor…inを使ってオブジェクトから値を1つずつ取り出してみる

JavaScriptにはfor…inというプロパティの数だけ繰り返しをする構文があるんですが、これってjQueryでも使えるのかなと思って試してみました。完全に自分用なのでこれが何に役立つかはわかりませんが、一応メモしときます。こんなのもできるんだねってだけです。

[ads_center]

for…inのおさらい

とりあえずfor…inで配列、連想配列、オブジェクトの各値を取り出すためのまとめです。

配列

var sample = ['sample1', 'sample2', 'sample3']; 
for (var i in sample) {
    document.writeln(sample[i] + '<br>');
}
// 実行結果
// sample1
// sample2
// sample3

連想配列

function test(x, y) {
    var sample = {text1: x, text2: y}
    for (var i in sample) {
        document.writeln(i + ':' + sample[i] + '<br>');
    }
}
test('テキスト1', 'テキスト2');
// 実行結果
// text1:テキスト1
// text2:テキスト2

オブジェクト

function test(a, b, c) {
    var obj = new Object();
    obj.text1 = a;
    obj.text2 = b;
    obj.text3 = c;
    for (var i in obj) {
        document.writeln(i + ':' + obj[i] + '<br>');
    }
}
test('テキスト1', 100, 'テキスト2');
// 実行結果
// text1:テキスト1
// text2:100
// text3:テキスト2

こんな感じで使っていきます。

jQueryでfor…in

jQueryでも使いたいって時はこんな感じで書くと一応動きます。#boxの中に入れていきます。

$(function() {
    function test(a, b, c, d) {
        var obj = {
            sample1: a,
            sample2: b,
            sample3: c,
            sample4: d
        };
        for (var i in obj) {
            $('<p>' + i + 'は' + obj[i] + '</p>').appendTo('#box');
        }
    }
    test(100, 'テキスト1', 200, 'テキスト2');
});
// 実行結果
// sample1: 100
// sample2: テキスト1
// sample3: 200
// sample4: テキスト2

普通に使えるんですね。

一般的には$.eachを使うの?

jQueryには$.eachがあるので普通はこっちを使った方がいいんですかね?使い分けがよくわかりません。けど用意されてるんならこちらを使うべきなのかもですね。

$(function() {
    function test(a, b, c, d) {
        var obj = {
            sample1: a,
            sample2: b,
            sample3: c,
            sample4: d
        }
        $.each(obj, function(i, val){
            $('<p>' + i + ':' +  val + '</p>').appendTo('#box');
        })
    }
    test('サンプル1', 500, 'サンプル2', 600);
});
// 実行結果
// sample1:サンプル1
// sample2:500
// sample3:サンプル2
// sample4:600

とまあ素人丸出しで申し訳ないんですが、1つのことをやるのにも色々なパターンがありますね。どういった時にどういった使い分けをするのかっていう部分がまだまだ理解できませんが、とりあえず今後も疑問に思ったことはメモがてらブログにアップしていこうかと思います。

関連記事

  1. TwentyTwenty

    JavaScript

    2枚の画像を見比べれるjQueryプラグイン「TwentyTwenty」

    TwentyTwentyは2枚の画像を見比べれる便利なjQueryプラ…

  2. Letter by Letter JS

    JavaScript

    美しいフェードでテキストが徐々に表示されていく「Letter by Letter JS」

    Letter by Letter JSは美しいフェードでテキストを徐々…

  3. TabTab.js

    JavaScript

    アニメーション付きで切り替わるjQueryのタブプラグイン「TabTab.js」

    TabTab.jsは素敵なアニメーション付きのタブコンテンツを実装する…

  4. JavaScript

    JavaScriptの関数のスコープについてちょっと確認してみる

    JavaScriptの関数のスコープを確認、整理する意味で記事にしてみ…

  5. JavaScript

    レイアウトを超簡単に雑誌風に整列してくれるjQuery Masonryの使い方

    jQuery Masonryというプラグインを使えば、ものすごく簡単に…

  6. simpleSlideShow

    JavaScript

    カスタマイズしやすいシンプル・軽量なスライドショー「simpleSlideShow」

    simpleSlideShowは、シンプルで軽量なスライドショーを実装…

コメント

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

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

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP