jquery - 如何将其变成可链接的 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

您只需在通话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。

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

这与链接相同，真的。

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