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）には、一致する配列要素はありません。

はちょうど小さなビットの価格基準を緩め、あなたはすべてが期待どおりに動作することを確認できます：