title: jquery - hide filtering option (element) if no match is found
body: <p>I have the following code (also up and running on JSFIDDLE: <a href="http://jsfiddle.net/DSuua/12/" rel="nofollow">http://jsfiddle.net/DSuua/12/</a>)</p>
  
  <p>It sorts products based on price matches. I want to hide a filter option from the left panel list altogether on page load if there are no products within that price range (versus showing the price range no matter what, like I do now).  </p>
  
  <p>So, as an example, if there are no products within the price range of 10 - 20, then hide the "$10 - $20" on the left panel since it's irrelevant and it just shows an annoying "no matches found" message to user.</p>
  
  <p>Right now the filtering is performed on the click event. Before the filtering is done, it needs to first check the list attribute values (name, title) agains the product price values (lowest &amp; highest price) and if no matching ranges are found, then hide those filter items from the list.</p>
  
  <p>I'm limited to this solution on the client-side only.</p>
  
  <p>Also, any overall tips for improving this code are welcome.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul id="filterByPrice"&gt;    
      &lt;li&gt;&lt;span class="section-header"&gt;PRICE&lt;/span&gt;&lt;/li&gt;    
      &lt;li&gt;&lt;a href="#" title=""&gt;Any Price&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" name="0" title="9"&gt;Under $10&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" name="10" title="19"&gt;$10 - $20&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" name="20" title="29"&gt;$20 - $30&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" name="30" title="39"&gt;$30 - $40&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" name="40" title="49"&gt;$40 - $50&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" name="50" title="9999"&gt;Over $50&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul id="products"&gt;
      &lt;li&gt;
          &lt;a href="/product-one"&gt;Product One&lt;/a&gt;&lt;br&gt;
          &lt;span id="lowestPriceRange"&gt;0&lt;/span&gt;
          &lt;span id="highestPriceRange"&gt;9&lt;/span&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="/product-two"&gt;Product Two&lt;/a&gt;&lt;br&gt;
          &lt;span id="lowestPriceRange"&gt;20&lt;/span&gt;
          &lt;span id="highestPriceRange"&gt;29&lt;/span&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="/product-three"&gt;Product Three&lt;/a&gt;&lt;br&gt;
          &lt;span id="lowestPriceRange"&gt;30&lt;/span&gt;
          &lt;span id="highestPriceRange"&gt;39&lt;/span&gt;
      &lt;/li&gt;
      &lt;div id="nothingFound" style="display:none;"&gt;
          Nothing found
      &lt;/div&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>#filterByPrice, #products {
   border:1px solid #ccc;
   padding:10px;  
   width:100px; 
   margin:10px; 
   float:left;
   position:relative;   
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var noProductMatches = $('#nothingFound');
  
  $('#filterByPrice li a').click(function() 
  {
      noProductMatches.hide();
  
      var priceRangeSelectedItem = $(this).html().toLowerCase();
      var minSelectedPrice = parseInt( $(this).attr("name") );
      var maxSelectedPrice = parseInt( $(this).attr("title") );
      var productContainer = $('#products li');
  
      if (priceRangeSelectedItem == 'any price')
      {
          productContainer.fadeOut("slow");
          productContainer.delay(100).fadeIn("slow");
      }
      else
      {
          var results = productContainer
              .fadeOut(100)
              .delay(100)
              .filter(function() 
              {
                  var minProductPrice = parseInt( $(this).find("#lowestPriceRange").html().toLowerCase() );
                  var maxProductPrice = parseInt( $(this).find("#highestPriceRange").html().toLowerCase() );
  
                  return (minProductPrice &gt;= minSelectedPrice &amp;&amp;  maxProductPrice &lt;= maxSelectedPrice);
              })
              .each(function(index, item) 
              {
                  $(item).fadeIn("slow");
              });
  
              if (results.length == 0)
              {
                  noProductMatches.fadeIn();
              }
      }
  });
  ​
  </code></pre>
  
  <p>​</p>