如何添加功能到一些jQuery對象，但不是其他人？

Question

比方說，我有一個<ul>列表：

<ul class="products"> 
    ... 
</ul> 

我想用jQuery選擇它，然後添加一些功能到該對象。例如，我想添加一個addProduct(productData)函數和一個deleteProduct(productId)函數。但是，我希望函數只能添加到選擇器返回的對象中。舉個例子，像這樣的：

var productList = $.extend($('ul.products'), { 
    addProduct: function(productData) { 
     // add a new li item 
    }, 
    deleteProduct: function(productId) { 
     // delete li with id 
    } 
}); 

我該如何使用jQuery來做這件事？這裏的關鍵是我只想將函數添加到由jQuery選擇器返回的實例中。換句話說，我不想修改jQuery的原型或創建插件，因爲這些將使得所有功能都可用，而我只想將這些功能添加到一個特定實例。

Answer 1

如果您只希望addProduct和方法在該對象上使用該功能，那麼您得到的結果將會正常工作;但是您必須保留對該jQuery對象的引用/僅使用一次，以保留addProduct和方法的存在。

但是，這些addProduct和方法對於特定的jQuery對象是唯一的;這些方法不會存在於您創建的任何其他jQuery對象上;

var productList = $.extend($('ul.products'), { 
    addProduct: function(productData) { 
     // add a new li item 
    }, 
    deleteProduct: function(productId) { 
     // delete li with id 
    } 
}); 

// Using this particular jQuery object (productList) will work fine. 
productList.addProduct(); 
productList.removeProduct(); 

// However, addProduct() does not exist on new jQuery objects, even if they use 
// the same selector. 
$('ul.products').addProduct(); // error; [object Object] has no method 'addProduct' 

的最佳方式做這將是去背到基礎知識和定義不同addProduct和功能，它接受一個jQuery對象。如果你想限制這些功能，他們只能在ul.products選擇器上工作，你可以這樣做;

function addProduct(obj) { 
    obj = obj.filter('ul.products'); 

    // do something with `obj` (its a jQuery object) 
} 

會建議使用此方法，因爲它保持jQuery.fn API相一致;否則你會添加addProduct和removeProduct到某些jQuery.fn實例但不是其他，或在其他情況下使用它們的冗餘。然而，使用這種方法，addProduct和removeProduct總是存在，但如果他們不想使用它們，不要以任何方式獲取。

---

歷史記載

這個答案原文爲2011年11月，當時的jQuery 1.7發佈了。從那以後，API發生了很大變化。上面的答案與當前的 2.0.0版jQuery相關。

此前1.9，一點點使用的方法稱爲使用存在jQuery.sub，這是相關到你想要做什麼（但不會幫助你，除非你改變你的方法）。這創建了一個新的jQuery構造函數，所以你可以這樣做;

var newjQuery = jQuery.sub(); 
newjQuery.fn.addProduct = function() { 
    // blah blah 
}; 
newjQuery.fn.deleteProduct = function() { 
    // blah blah 
}; 

var foo = newjQuery('ul.products'); 
foo.deleteProduct(); 
foo.addProduct(); 

var bar = jQuery('ul.products'); 
bar.deleteProduct(); // error 
bar.addProduct(); // error 

不過要小心，在$方法別名將引用舊jQuery對象，而不是newjQuery實例。

jQuery.sub已從1.9中的jQuery中刪除。它現在可用as a plugin。

Answer 2

你可以使自己的jQuery方法如下：

$.fn.addProduct = function(){ 
    var myObject = $(this); 
    // do something 
} 

// Call it like: 
$("ul.products").addProduct(); 

這是一個有點棘手，但因爲你製作的是非常具體的列表的方法。因此，爲了確保至少應該在對象的類型上添加一些檢查，並在當前對象是正確的時候處理代碼，比如說一個輸入元素。

另一種方法是將接收列表作爲參數的正常Javascript方法。這樣你可以製作更多列表的具體方法。

Answer 3

我想你想添加一個函數，該DOM對象。

$(function(){ 
    // [0] gets the first object in array, which is your selected element, you can also use .get(0) in jQuery 
    $("#test")[0].addProduct = function(info){ 
     alert("ID: " + this.id + " - Param: " + info); 
    }; 


    $("#test")[0].addProduct("productid"); 
}); 

上面的腳本西港島線提醒 「ID：測試 - 帕拉姆：產品ID」

一個活生生的例子：http://jsfiddle.net/jJ65A/1/

或正常的JavaScript

$(function(){ 
    document.getElementById("test").addProduct = function(info){ 
     alert(info); 
    }; 
}); 

Answer 4

我認爲可能只是使用委託在jQuery中：

$(".parentclass").delegate("childclass","eventname",function(){});