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

    JavaScript

    軽量でシンプルなWeb用のWYSIWYGエディタを実装できる「pell」

    pellは1.5KBと非常に軽量でシンプルなWeb用のWYSIWYGエ…

  2. Dependent Dropdown

    JavaScript

    ネストされたセレクトボックスを実装できる「Dependent Dropdown」

    Dependent Dropdownはネストされたセレクトボックスを実…

  3. Custom Carousel

    JavaScript

    カードスタイルのカルーセル・スライダー実装「Custom Carousel」

    Custom Carouselはカードスタイルによるシンプルなカルーセ…

  4. Background Blur

    JavaScript

    画像をボカしてくれるクロスブラウザ対応の「Background Blur」

    Background Blurは画像をカッコよくボカしてくれるクロスブ…

  5. JavaScript

    JavaScriptの基本構文を忘れた!って時にサクっと見たい10項目

    最近はよくjQueryプラグインを使ったりすることが多くなってきたので…

コメント

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

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

最近の記事

  1. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  2. ブラジルイパネマ
  3. 梅しば
  4. BM-IBCDH13RD

アーカイブ

PAGE TOP