無法在函數內的對象上調用$ .data

Question

我正在玩jQuery $.data函數，我遇到了麻煩。 如果我喜歡這樣：

(function($){
    $.fn.testData = function() {
         var obj = $(this);
         obj.text($.data(obj,'test')); 
    }
})(jQuery);

var element = $("#test");
$.data(element,'test','hej');
element.testData();

這是未定義的。 為什么？

編輯：

如果我使用elem.data(key)函數，它可以正常工作，如下所示：

(function($){
    $.fn.testData = function() {
         var obj = $(this);
         obj.text(obj.data('test')); 
    }
})(jQuery);

var element = $("#test");
element.data('test','hej');
element.testData();

但我剛剛看到Paul Irish的幻燈片，聲稱elem.data比$.data(elem)慢10倍： http ： elem.data

Answer 1

(function($){
    $.fn.testData = function() {
         var obj = $(this);
         obj.text($.data(obj[0],'test'));
    }

    var element = $("#test");
    $.data(element[0],'test','hej');
    element.testData();
})(jQuery);

這是jsFiddle： http ： //jsfiddle.net/TdJHq/

Answer 2

問題是您正在創建用於附加和檢索數據的不同對象。 每當你調用$(selector) ，你都在創建一個新的 jQuery對象，它與你附加數據的對象不同。

這是一個簡單的例子：

$.data($('#test'),'test','hej');
alert($.data($('#test'),'test'));

它會給你undefined 。

這就是$.data期望DOM元素而不是jQuery對象的原因。 無論您如何檢索某個DOM元素，引用始終是相同的。

因此，要么傳遞DOM元素（ $('#test')[0] ）或更好 ，請使用$('#test').data() 。

Answer 3

jQuery.data（ doc jQuery.data ）適用於DOM元素，而不適用於jQuery元素。 所以你必須在jQuery選擇器下提取真實元素。

obj.text($.data(obj[0],'test'));

這是@alexl解釋的內容。

但是還有一個.data（）方法，它適用於jQuery選擇器，所以你可以使用：

// getter
obj.text($obj.data('test'));
// setter
obj.text($obj.data('test','toto'));

而且你可能兩者兼而有之。