jQuery.dataの使い方 - KAYAC Engineers' Blog

最近気づいたんですが、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 関連記事を追加しました）