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. CSS3 3D Text Plugin for jQuery
  2. no-image

    JavaScript

    シンプル・軽量なアナログ時計を実装できる「jsRapClock」

    jsRapClockはシンプルで軽量なアナログ時計を実装できるjQue…

  3. Bootstrap Carousel Touch Slider with Text Animation
  4. Tabulous.js

    JavaScript

    色々なエフェクトのタブパネルが実装できるjQueryプラグイン「Tabulous.js」

    素敵なタブパネルがあったのでメモがてらご紹介します。オプションを指定す…

  5. scrollMonitor

    JavaScript

    要素が表示領域に入ったり出たりするとイベントを受け取れる「scrollMonitor」

    scrollMonitorは、要素が表示領域(ビューポート)に入ったり…

  6. VenoBox

    JavaScript

    画像・Google マップ・YouTubeなどを埋め込めるLightbox風jQueryプラグイン「…

    VenoBoxは色んなコンテンツを埋め込めるLightbox風jQue…

コメント

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

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

最近の記事

  1. メンソレータム リップスティック
  2. スイデンテラス 濃厚バターチキン
  3. ドトール マンデリン
  4. 厚切りトーストツナチーズメルトとブラックコーヒー
  5. ドトール マイルドブレンドコーヒー

アーカイブ

PAGE TOP