title: Loop through list using Jquery
body: <p>Total js newb here.</p>
  
  <p>Here is the HTML</p>
  
  <pre><code>&lt;a href="#" class="dur" id="8.5"&gt;Size 8.5&lt;/a&gt;
   &lt;div class="product1"&gt;
   &lt;ul class="sizeAvail" style="display:none;"&gt;   
    &lt;li&gt;8&lt;/li&gt;    
    &lt;li&gt;8.5&lt;/li&gt;  
    &lt;li&gt;9&lt;/li&gt;    
    &lt;li&gt;9.5&lt;/li&gt;  
    &lt;li&gt;10&lt;/li&gt;
   &lt;/ul&gt;
   &lt;/div&gt;
   &lt;div class="product2"&gt;
   &lt;ul class="sizeAvail" style="display:none;"&gt;   
    &lt;li&gt;8&lt;/li&gt;    
    &lt;li&gt;8.5&lt;/li&gt;  
    &lt;li&gt;9&lt;/li&gt;    
    &lt;li&gt;9.5&lt;/li&gt;  
   &lt;/ul&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Here's the 'logic' of what I need...</p>
  
  <p><li>When the user clicks the Link</li>
      <li>Capture the id of that element</li>
      <li>Set that as a variable</li>
      <li>Loop through li for all ul that have class 'sizeAvail'</li>
      <li>If li element matches variable</li>
      <li>stop looping and move onto next ul</li>
      <li>If ul does not have li that matches variable</li>
      <li>set class of container div to 'hide'</li></p>
  
  <p>This is where I'm at so far...any help would be greatly appreciated.</p>
  
  <pre><code>&lt;script type = "text/javascript" &gt; $(document).ready(
   $(".dur").click(function () {
   var clickedSize = $(this).attr("id");
   $(".sizeAvail").each(function (li,+) {
      alert($(this).text());
   });
  }); 
  &lt;/script&gt;
  </code></pre>