如何将其变成可链接的 jquery 函数？

Question

我的函数返回基于数据属性的过滤（数组）项目列表。

如果我能让这个函数可链接，我会很高兴：

$(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(); 

我该怎么做？

Answer 1

您需要添加的只是在 console.log 调用之后 return selected; 。

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

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

然后你可以调用它，

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

它是一个更 jQueryish 的。

Answer 2

您可以只返回过滤后的元素。

$(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();

这实际上与链接相同。

这里有一个快速测试来展示它的实际效果