title: Filter the product list with data-price attributes
body: <p>I am able to filter the product list on basis of store and brand in my code, but I'm not able to filter it with price range.</p>
  
  <pre><code>&lt;div id="prod"&gt;
      &lt;div class="content" data-brand="Andrew" data-price="1000" data-store="JCPenny"&gt;Andrew&lt;/div&gt;&lt;br /&gt;
      &lt;div class="content" data-brand="Hill" data-price="4300" data-store="JCPenny"&gt;Hill&lt;/div&gt;&lt;br /&gt;
      &lt;div class="content" data-brand="Andrew" data-price="1600" data-store="JCPenny"&gt;Andrew&lt;/div&gt;&lt;br /&gt;
      &lt;div class="content" data-brand="Hill" data-price="800" data-store="SuperMart"&gt;Hill&lt;/div&gt;&lt;br /&gt;
      &lt;div class="content" data-brand="Hill" data-price="2300" data-store="SuperMart"&gt;Hill&lt;/div&gt;&lt;br /&gt;
      &lt;div class="content" data-brand="Andrew" data-price="800" data-store="JCPenny"&gt;Andrew&lt;/div&gt;&lt;br /&gt;
      &lt;input type="checkbox" class="brand" id="Andrew" /&gt;Andrew
      &lt;input type="checkbox" class="brand" id="Hill" /&gt;Hill
      &lt;input type="checkbox" class="store" id="JCPenny" /&gt;JCPenny
      &lt;input type="checkbox" class="store" id="SuperMart" /&gt;SuperMart
      &lt;input type="radio" name="range" class="price" id="0-ALL"/&gt;All
      &lt;input type="radio" name="range" class="price" id="0-2000"/&gt;Rs.0-2000
      &lt;input type="radio" name="range" class="price" id="2000-4000"/&gt;Rs.2000-4000
      &lt;input type="radio" name="range" class="price" id="4000-6000"/&gt;Rs.4000-6000
      &lt;input type="radio" name="range" class="price" id="&gt;6000"/&gt;Rs.&gt;6000
  &lt;/div&gt;
  </code></pre>
  
  <p>Above is my <code>div</code> layout, below I'm highlighting my JavaScript for filtering logic which I have done for brand and store with my friends help</p>
  
  <pre><code>&lt;script&gt;
  var a=$("input.brand");
  var b=$("input.store");
  var brand=new Array();
  var store=new Array();
  $("input[name=range]").change(function (e) {
  
  alert("range");
      var toggle = this.checked;
      var range = this.value.split('-');
      var rangeFrom = parseInt(range[0]);
      var rangeTo = parseInt(range[1]);
      $(".container &gt;div[data-price]").each(function(){
          var $this = $(this);
          // Check if category is active
          var categoryActive = $("#" + $this.data("brand")).prop("checked");
          // Get price as number
          var price = parseFloat($this.data('price'));
          // Toggle visibility based on category and price range
          $this.toggle(price &gt;= rangeFrom &amp;&amp; price &lt;= rangeTo &amp;&amp; categoryActive );
      });
  });
  $('input[type="checkbox"]').change(function(){
      if($(this).is(":checked")){
          $('#prod &gt;div').hide();
          if(this.className == "brand"){
              console.debug("brand checked");
              brand.push($(this).attr('id'));
          }else if(this.className == "store"){
              console.debug("store checked");
              store.push($(this).attr('id'));
          }
          console.log(brand+","+store);
          displaydivs(brand,store);
      }else{
          $('#prod &gt;div').show();
          if(this.className == "brand"){
              var index = brand.indexOf($(this).attr('id'));
              if (index &gt; -1) {
                  brand.splice(index, 1);
              }       
          }else if(this.className == "store"){
              var index = store.indexOf($(this).attr('id'));
              if (index &gt; -1) {
                  store.splice(index, 1);
              } 
          }
          displaydivs(brand,store);
      }     
  });
  
  
  function displaydivs(brand,store)
  {
      $("#prod &gt;div").hide();
      if(brand.length &gt; 0 &amp; store.length &gt; 0){ 
          $.each(brand, function( index, value ){
              var temp = $("#prod &gt;div[data-brand="+value+"]")[0];
              var data = $(temp).attr("data-store");
              var idx = store.indexOf(data);
              if(idx &gt; -1){
                $("#prod &gt;div[data-brand="+value+"][data-store="+data+"]").show();
            }            
        });  
          $.each(store, function( index, value ){
              var temp = $("#prod &gt;div[data-store="+value+"]")[0];
              var data = $(temp).attr("data-brand");
              var idx = brand.indexOf(data);
              if(idx &gt; -1){
                $("#prod &gt;div[data-brand="+data+"][data-store="+value+"]").show();
            }            
        });
      }
      else if(brand.length &gt; 0 &amp; !(store.length &gt; 0)){ 
          $.each( brand, function( index, value ){
              $("#prod &gt;div[data-brand="+value+"]").show();
          });
      }
      else if(!(brand.length &gt; 0) &amp; store.length &gt; 0){ 
          $.each( store, function( index, value ){
              $("#prod &gt;div[data-store="+value+"]").show();
          });
      }else{
          $("#prod &gt;div").show();
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>This code is working fine for store and brand both but I'm not able to code for price range filtering. Basically my requirement is as follows.</p>
  
  <p>When I select suppose a brand from checkbox list say andrew, then I select a store like JCPenny and three divs will come because <code>data-brand=andrew</code> and <code>data-store=JCPenny</code> are present in only three divs collectively. Then if I select price range filter(2000-4000), then I should get only those divs in which data-brand is Andrew and data-store is JCPenny and price is from 2000 till 4000.</p>
  
  <p>Please guide me how to do price filtering on this list.It will be a lot of help if sum body can help me out.</p>