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

    JavaScript

    スクロールで画像をクロスフェードできるjQueryプラグイン「crossfade.js」

    crossfade.jsというjQueryプラグインを使えば、スクロー…

  2. JavaScript

    画像の一部をカッコよく拡大したりできるjQueryプラグイン「Loupe」

    こうゆうプラグインは初めて使ってみたんですが、とても面白いですね。Lo…

  3. InlineTweet.js

    JavaScript

    Webページのテキストにツイートリンクを作成できる「InlineTweet.js」

    InlineTweet.jsはWebページのテキストにツイートリンクを…

  4. justContext.js

    JavaScript

    シンプルなコンテキストメニューを実装できる「justContext.js」

    justContext.jsはjQueryなどを必要とせずに(ピュア …

  5. Dependent / Cascading Select List with jQuery Select2

    JavaScript

    選択内容によりその下の内容も変化するセレクトボックス「Dependent / Cascading S…

    セレクトボックスを強力でカスタマイズ性が高く、そして充実させる人気のj…

コメント

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

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

最近の記事

  1. 三菱ブレッドオーブン
  2. 浜離宮恩賜庭園

アーカイブ

PAGE TOP