如何在 JQuery 数组上有多个过滤器

Question

我目前有一些代码可以使用滑块根据价格范围过滤数组。我需要能够为各种尺寸和颜色添加复选框，以便我还可以使用它们的值进行过滤。这是我到目前为止的代码，但不确定如何实现复选框，以便我有多种过滤数组的方法。

//this is the main generated array
    var product = [{"price":"200","color":"red","size":"small"},
                   {"price":"250","color":"brown","size":"medium"},
                   {"price":"300","color":"red","size":"large"}];

// array to display filtered array
    var filteredProducts = [];  
    var key = 0;

//start of price range filter
    if(!minPrice && !maxPrice){
       filteredProducts = products;
    } else{
       $.each(products, function(i, object) {   
           var curentPrice = parseFloat(object.price); 
           var priceMinOk = true;
           var priceMaxOk = true;
       // filter results match the price range
           if(maxPrice || minPrice){
              if(maxPrice && maxPrice<curentPrice){
                 priceMaxOk = false;
              }
              if(minPrice && minPrice>curentPrice){
                 priceMinOk = false;
              }
           }  
       //  loop over list and get only related to new array
           if( priceMinOk && priceMaxOk ){  
              filteredProducts[key] = object;                  
              key++;
           }  
       });
    } 

提前感谢您的帮助”

小提琴http://jsfiddle.net/ltbmedia/86pEn/

Answer 1

使用$.grep 代替$.each，并像这样构造代码：

var products = [ /* ... */ ],
    predicates = [
        function predicate1(obj) { /* ... */ },
        function predicate2(obj) { /* ... */ },
        // ... ,
        function predicateN(obj) { /* ... */ }
    ],
    filteredProducts;

filteredProducts = $.grep(products, function (element, index)
{
    for (var i=0; i<predicates.length; i++)
    {
        if (!predicates[i](element)) return false;
    }

    return true;
});

---

示例：http://jsfiddle.net/mattball/Rsbcu/

---

更复杂的例子：http://jsfiddle.net/mattball/vZzjM/

您可能会注意到仍然返回一个空数组，但这实际上是有道理的。鉴于您指定的条件 (minPrice = 201, maxPrice = 301, color = red or green, size = small)没有匹配的数组元素。

将价格标准放宽一点微小，您会发现一切正常：http://jsfiddle.net/mattball/MQ8Mc/