历史记录

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

如果您只想在{em>单个 jQuery对象上使用addProduct和deleteProduct方法，那么您所获得的将会正常工作;但是您必须保留对该jQuery对象的引用/仅使用一次，以保留addProduct和deleteProduct方法的存在。

但是，这些addProduct和deleteProduct方法对于特定的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和deleteProduct函数，它们接受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：test - Param：productid”

一个实例：http://jsfiddle.net/jJ65A/1/

或普通的javascript

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

Answer 4

我认为可能只是在jQuery中使用delegate：

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

如何将函数添加到某些jQuery对象，而不是其他jQuery对象？

4 个答案:

历史记录