Question

如何在jQuery中编写新的链式方法？我的jQuery中有一个非常程序化的风格：

$("#SaveButton").click(function () {
    Foo($("#SubTotal"));
    Foo($("#TaxTotal"));
    Foo($("#Total"));
    Bar($("#SubTotal"));
    Bar($("#TaxTotal"));
    Bar($("#Total"));        
});

如何在jQuery中创建一个.foo（）方法，以便我可以编写：

$("#SaveButton").click(function () {
    $("#SubTotal,#TaxTotal,#Total").foo().bar();
});

在相关的一点 - 是否有一种简单的方法（在Visual Studio或Notepad ++或其他方面）用Foo($("#selector"));查找和替换所有$("#selector").foo();？

Answer 1

您可以通过以下方式定义自定义jQuery函数：

$.fn.foo = function(){
    //`this` is a jQuery object, referring to the matched elements (by selector)
    return this.each(function(index, element){
        //`this` inside this function refers to the DOM element
        var $this = $(this); //`this` is wrapped in a jQuery object.
    });
}

在此定义之后，每个$("...")对象都将使用foo方法。

如果您不确定jQuery对象是否由美元定义，请将此定义包装在此函数中：

(function($){
    //Within this wrapper, $ is the jQuery namespace
    $.fn.foo = function(){
        //...
    }
})(jQuery);

Answer 2

猜猜你需要在每个函数的末尾返回$（this）以使其可链接。

使用robw写的函数并返回$（this）。

创建一个新的jquery链式方法

2 个答案: