如何将其转换为可链接的jquery函数?

时间:2011-10-06 08:34:17

标签: jquery function chainable

我的函数根据数据属性返回一个过滤的(数组)项目列表。

如果我可以将此功能链接起来,我希望如此:

$(document).ready(function (){
    function filterSvcType (svcType) {
        var selectedServices = $("#service-list div");
        var chose = selectedServices.filter(function() {
            return $(this).data("service-type") ==  svcType;
        });

        console.log(chose);             
    }
    filterSvcType("hosting");       
});

我想做的就是这样称呼:

filterSvcType("hosting").fadeOut(); 

我该怎么做?

2 个答案:

答案 0 :(得分:9)

return chose;来电后,您需要添加console.log

但你也可以把它变成一个jQuery插件

(function($) {
    $.fn.filterServiceType = function(svcType){
       return this.filter(function(){
           return $(this).data("service-type") ==  svcType;
       });
    };
})(jQuery);

然后你可以打电话给

$('#service-list div').filterSvcType('hosting').fadeOut();

更多jQueryish。

答案 1 :(得分:1)

您只需返回已过滤的元素

即可
$(document).ready(function (){
    function filterSvcType (svcType) {
        var selectedServices = $("#service-list div");
        var chose = selectedServices.filter(function() {
            return $(this).data("service-type") ==  svcType;
        });
        return chose;
        console.log(chose);             
    }
    filterSvcType("hosting").fadeOut();       
});

这与在所有jQuery方法上使用的原理相同。它们为您发送的任何选择器和/或集合执行某些逻辑,然后返回该集合。所以现在你可以这样做:

var filtered = filterSvcType("hosting");
filtered.fadeOut();

与链接相同,真的。

Here's a quick test to show it in action