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

    JavaScript

    画像をズームできてギャラリーにもすることができるjQueryプラグイン「Zoomer」

    ZoomerというjQueryプラグインを使えば画像をズームさせる機能…

  2. FocusPoint

    JavaScript

    画像の指定した部分を中心にレスポンシブ化できるjQueryプラグイン「FocusPoint」

    FocusPointというjQueryプラグインを使えば、画像の指定し…

  3. no-image

    JavaScript

    多彩なパラメーターでモバイルフレンドリーなjQuery Lightboxプラグイン「frydBox」…

    frydBoxは、多彩なパラメーターでカスタマイズ性の高いモバイルフレ…

  4. bcralnit.js
  5. Amigo Sorter Plugin

    JavaScript

    タッチ対応で直感的に並べ替えできるjQueryプラグイン「Amigo Sorter Plugin」

    Amigo Sorter Pluginは、タッチ対応で直感的にリスト項…

  6. Art Text Light jQuery plugin

    JavaScript

    テキストに光が移動するエフェクトを与えることができる「Art Text Light jQuery p…

    指定したテキストに光が移動するエフェクトを与えることができるjQuer…

コメント

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

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

最近の記事

  1. RF85mm F2 MACRO IS STM
  2. Anker PowerWave Pad Alloy
  3. Anker Bolder LC30
  4. BG-R10

アーカイブ

PAGE TOP