title: Using each() to iterate through multiple ul's and hiding any child li's greater than 8
body: <p>Need a bit of help understanding how to iterate through all ul elements with a class of ul.children and hide any of the child elements under ul.child greater than 8. </p>
  
  <p>example of my code below:</p>
  
  <pre><code>$(function() {
  $('ul.children').each(function() {
      var $ul = $(this);
      if($ul.children().length &gt; 8) {
          $ul.hide();
      } 
  });
  });
  </code></pre>
  
  <p>example of my html code:</p>
  
  <pre><code>&lt;ul class="children&gt;
     &lt;li&gt;1&lt;/li&gt;
     &lt;li&gt;2&lt;/li&gt;
     &lt;li&gt;3&lt;/li&gt;
     &lt;li&gt;4&lt;/li&gt;
     &lt;li&gt;5&lt;/li&gt;
     &lt;li&gt;6&lt;/li&gt;
     &lt;li&gt;7&lt;/li&gt;
     &lt;li&gt;8&lt;/li&gt;
     &lt;li&gt;hide all other li elements below this point&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul class="children&gt;
     &lt;li&gt;1&lt;/li&gt;
     &lt;li&gt;2&lt;/li&gt;
     &lt;li&gt;3&lt;/li&gt;
     &lt;li&gt;4&lt;/li&gt;
     &lt;li&gt;5&lt;/li&gt;
     &lt;li&gt;6&lt;/li&gt;
     &lt;li&gt;7&lt;/li&gt;
     &lt;li&gt;8&lt;/li&gt;
     &lt;li&gt;hide all other li elements below this point&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>