如何在JQuery數組上使用多個篩選器

我目前有一些代碼可以使用滑塊基於價格範圍篩選數組。我需要能夠添加各種大小和顏色的複選框，以便我也可以使用它們的值進行過濾。這是迄今爲止的代碼，但我不確定如何實現複選框，以便我有多種方式來過濾數組。如何在JQuery數組上使用多個篩選器

//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/

來源

2011-08-16 dbach

使用$.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/

來源

2011-08-16 21:47:26

感謝馬特，我假設每個「功能predicate1（OBJ）{/ * .. 。* /}用於每個過濾元素（即大小），對嗎？ – dbach

沒錯。每個謂詞將測試每個元素的單獨條件。在你的問題的例子代碼中，你會使用兩個謂詞，一個用來測試最低價格條件，一個用來測試最高價格條件。順便說一句，謂詞是一個返回布爾值的函數。 –

再次感謝，但不知道我很清楚你的意思。對於一個特定的元素值，預測功能測試如何，對不起，一直在我的頭撞牆在這一整天！ – dbach

如何在JQuery數組上使用多個篩選器

回答

相關問題