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

WordPressプラグイン「WPtap Mobile Detector」を使えばスマートフォン専用テーマに簡単自動で振り分けられる前のページ

プロフェッショナルなWebデザインのタイポグラフィ 25次のページ

関連記事

  1. Fixit

    JavaScript

    要素を特定の位置に固定できるjQueryプラグイン「Fixit」

    Fixitは要素を特定の位置に固定することができるjQueryプラグイ…

  2. Random Quote Machine

    JavaScript

    ランダムにテキスト(クオート)を表示させる「Random Quote Machine」

    Random Quote Machineは、設定したデータのなかからラ…

  3. Bootstrap Mobile FullScreen Modal
  4. fineScroll bar

    JavaScript

    簡単に使えるスクロールバー実装「fineScroll bar」

    fineScroll barは簡単に使えるスクロールバーを実装できるj…

コメント

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

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

最近の記事

  1. OWL-LPB6701LA
  2. cheero Power Mountain mini 30000mAh CHE-110
  3. 帆布カメラインナーケース B-2タイプ

アーカイブ

PAGE TOP