読者です 読者をやめる 読者になる 読者になる

jQuery.dataの使い方

javascript jquery tips

最近気づいたんですが、jQuery.dataが結構便利だと思うので紹介してみたいと思います。


(function($) {
    var name_space = 'name_space';
    $.fn[name_space] = function(options) {
        var elements = this;
        var settings = $.extend({
        }, options);

        elements.each(function() {
            var t = this;
            $.data(t, name_space, {});
            $(t).hover(function () {
                var obj = $.data(this, name_space);
                obj.status = 'over';
                $.data(self, name_space, obj);
            }, function () {
                var obj = $.data(this, name_space);
                obj.status = 'out';
                $.data(self, name_space, obj);
            });
        });

        return this;
    };
})(jQuery);

これは単純にmouseoverしているかどうかを設定しているだけですが、「ある要素がクリックされているか否か」、「ある要素の値が設定されているか否か」をtagの種類によらず保持できるのはそれなりに使い道があると思います

また、保持できる内容がobjectなので、html element等をそのまま保持できるのも魅力です。


//最初のa tagに最後のa tagの参照を保持
$.data($('a:first').get(0), 'hoge', $('a:last').get(0));

//保持されているa tagのhrefを返す
$.data($('a:first').get(0), 'hoge').href;
//->"http://bm11.kayac.com/"

関連記事

jQueryを使うときに気をつけるべき8のポイント

jQuery Plugin作成時の3つの注意点

(2009/1/8 関連記事を追加しました)