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

JavaScript

jQueryでオブジェクトの型を取得して判定などをしたい場合はjQuery.type()を使う

jQuery.type(obj)を使えばオブジェクトの型を知ることができるみたいです。取得した型を判定して、処理を分けたりといった時などに役立ちそうな感じですね。ということでさっそく使ってみました。使い方は引数に何か値を入れるだけです。以下サンプルコードです。

[ads_center]

jQuery.type(obj)

こんな感じで色々と引数に値を入れてみると、その型を取得できます。

var valueType = $.type("aaa");
alert(valueType); // string

var valueType = $.type(123);
alert(valueType); // number

var valueType = $.type(true);
alert(valueType); // boolean

var valueType = $.type([]);
alert(valueType); // array

var valueType = $.type({});
alert(valueType); // object

配列やオブジェクトに入れた値の型を1つずつ判定して何か処理をしたい場合は以下のようにすればいいですね。

配列

var arr = ["aaa", 123, true, [], {}];
$.each(arr, function(i, value) {
    var valueType = $.type(value);
    if(valueType === "string") {
        $('<p />').text("arr[" + i + "](" + value + ")は" + "stringです").appendTo('body');
    } else if(valueType === "number") {
        $('<p />').text("arr[" + i + "](" + value + ")は" + "numberです").appendTo('body');
    } else if(valueType === "boolean") {
        $('<p />').text("arr[" + i + "](" + value + ")は" + "booleanです").appendTo('body');
    } else {
        $('<p />').text("arr[" + i + "]" + value + "は" + valueType + "です").appendTo('body');
    }
});

// 実行結果
// arr[0](aaa)はstringです
// arr[1](123)はnumberです
// arr[2](true)はbooleanです
// arr[3]はarrayです
// arr[4][object Object]はobjectです

オブジェクト

var obj = {
    key1: "aaa",
    key2: 123,
    key3: true,
    key4: [],
    key5: {}
};
$.each(obj, function(i, value) {
    var valueType = $.type(value);
    if(valueType === "string") {
        $('<p />').text("obj[" + i + "](" + value + ")は" + "stringです").appendTo('body');
    } else if(valueType === "number") {
        $('<p />').text("obj[" + i + "](" + value + ")は" + "numberです").appendTo('body');
    } else if(valueType === "boolean") {
        $('<p />').text("obj[" + i + "](" + value + ")は" + "booleanです").appendTo('body');
    } else {
        $('<p />').text("obj[" + i + "]" + value + "は" + valueType + "です").appendTo('body');
    }
});

// 実行結果
// obj[key1](aaa)はstringです
// obj[key2](123)はnumberです
// obj[key3](true)はbooleanです
// obj[key4]はarrayです
// obj[key5][object Object]はobjectです

ということで、型を知りたい時にはとても便利ですね。以下のサイトが参考になりました。

関連記事

  1. no-image

    JavaScript

    3Dキューブによる画像ギャラリー「3D Cube Image Gallery」

    3D Cube Image Galleryは、3Dキューブによるオシャ…

  2. Responsive Nav

    JavaScript

    レスポンシブ対応の軽量なナビゲーションを実装できる「Responsive Nav」

    レスポンシブ対応のナビゲーションを実装できる「Responsive N…

  3. jTableScroll

    JavaScript

    ヘッダーとフッターを固定したままスクロール可能なテーブル「jTableScroll」

    jTableScrollはヘッダーとフッターを固定したままスクロール…

  4. Motion Blur Effect with SVG

    JavaScript

    ブラーエフェクトを効果的に取り入れる「Motion Blur Effect with SVG」

    Webページ内でブラーエフェクトを効果的に取り入れることができる「Mo…

  5. jQuery Slideout Menu

    JavaScript

    スライドしてメニュー表示できるjQueryプラグイン「jQuery Slideout Menu」

    jQuery Slideout Menuはメニューをスライドして表示さ…

コメント

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

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

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP