¿Cómo puedo convertir esto en una función de jquery encadenable?

Question

Mi función devuelve una lista de elementos filtrada (matriz) basada en el atributo de datos.

me gustaría que si podía hacer esta función 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");  
}); 

Lo que quiero hacer es llamar así:

filterSvcType("hosting").fadeOut(); 

¿Cómo se hace esto?

Answer 1

Todo lo que necesitas es añadir return chose; después de su llamada console.log.

Pero también se puede convertir esto en un plugin de jQuery

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

A continuación, puede llamar como

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

que es un poco más jQueryish.

Answer 2

puede simplemente volver a los elementos filtrados

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

Este es el mismo principio que está siendo utilizado en todos los métodos de jQuery. Le dan cierta lógica al selector y/o colección que envíe, y luego devuelven esa colección. Así que ahora podría hacer:

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

Lo que es lo mismo que encadenar, realmente.

Here's a quick test to show it in action