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. stroll.js

    JavaScript

    CSS3を使った豊富なスクロールエフェクト「stroll.js」

    stroll.jsはCSS3を使った豊富なCSSリストスクロールエフェ…

  2. JavaScript

    フレキシブルなjQueryプラグインのアコーディオンパネル「Flexible Slide-to-to…

    いい感じのアコーディオンがあったので試してみたところ、とてもよさげだっ…

  3. JavaScript

    巻き簾のようにメニューを開閉するアニメーションを実装できるjQueryプラグイン「Makisu」

    巻き簾のようにリスト化した要素を1つずつ開いていったり閉じていったりで…

  4. qpScroll
  5. jquery-confirm

    JavaScript

    アラートやダイアログなどさまざまな機能を実装できる「jquery-confirm」

    jquery-confirmはアラートやconfirm、ダイアログなど…

  6. Philter

    JavaScript

    CSSのフィルターをコントロールできるjQueryプラグイン「Philter」

    PhilterはCSSのフィルターを簡単にコントロールすることができる…

コメント

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

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

最近の記事

  1. mill オイルヒーター
  2. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP