title: counting visible divs with class name jquery
body: <p>I'm having trouble using the <code>:visible</code> with class name.</p>
  
  <p>Example:</p>
  
  <pre><code>&lt;div class="groupedDiv" id="group1"&gt;
      &lt;div class="level1"&gt;
          Apples
          &lt;div class="level2"&gt; || L2-apple &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="level1" style="display:none;"&gt;
          Oranges 
          &lt;div class="level2"&gt; || [L2-orange] &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;br/&gt;
  
  &lt;div class="groupedDiv" id="group1"&gt;
      &lt;div class="level1"&gt;
          Roses
          &lt;div class="level2"&gt; || L2-rose &lt;/div&gt;
          &lt;div class="level3"&gt; l3 rose &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If I want to count the # of visible divs of class <code>level1</code></p>
  
  <p><code>$(".level1 :visible").length;</code> gives me output 3, doesn't this supposed to output 2 ?</p>
  
  <p><code>$(".level1 :visible").parent().length;</code> gives me output 2 which is correct.</p>
  
  <p>I have created this example at <a href="http://jsfiddle.net/metalhawk/P87jS/" rel="noreferrer">http://jsfiddle.net/metalhawk/P87jS/</a></p>
  
  <p>Any suggestions are helpful. Thanks</p>