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です

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

JavaScriptの関数のスコープについてちょっと確認してみる前のページ

WordPressのショートコードをテンプレート(テーマ)内で使用したい時のやり方次のページ

関連記事

  1. VenoBox

    JavaScript

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

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

  2. Solution for Long Drop Down Items

    JavaScript

    長いメニューもスクロールで表示できる「Solution for Long Drop Down Ite…

    長いドロップダウンメニューでもスクロール表示してくれるjQueryを活…

  3. gliojs

    JavaScript

    viewportから離れた時にイベントをトリガーしてくれる「gliojs」

    gliojsは、ページを閲覧している時にマウスがviewport(表示…

  4. no-image

    JavaScript

    スタイリッシュなスライダーを実装できるjQueryプラグイン「bsc-slider」

    bsc-sliderは、シンプルでスタイリッシュなスライダーを実装する…

  5. Optiscroll

    JavaScript

    縦横に対応したカスタマイズ性に優れたモダンなスクロールバー「Optiscroll」

    Optiscrollは、軽量で高度に最適化されたカスタマイズ性に優れた…

  6. jquery.confirmDialog

コメント

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

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

最近の記事

  1. 蒼龍唐玉堂 特製牛バラ担々麺
  2. サーモンアボカドサラダラップとドリップ
  3. 猿田彦フレンチ
  4. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて
  5. ビジネスホテル

アーカイブ

PAGE TOP