counting visible divs with class name jquery

Question

I'm having trouble using the :visible with class name.

Example:

<div class="groupedDiv" id="group1">
    <div class="level1">
        Apples
        <div class="level2"> || L2-apple </div>
    </div>

    <div class="level1" style="display:none;">
        Oranges 
        <div class="level2"> || [L2-orange] </div>
    </div>
</div>

<br/>

<div class="groupedDiv" id="group1">
    <div class="level1">
        Roses
        <div class="level2"> || L2-rose </div>
        <div class="level3"> l3 rose </div>
    </div>
</div>

If I want to count the # of visible divs of class level1

$(".level1 :visible").length; gives me output 3, doesn't this supposed to output 2 ?

$(".level1 :visible").parent().length; gives me output 2 which is correct.

I have created this example at http://jsfiddle.net/metalhawk/P87jS/

Any suggestions are helpful. Thanks

Answer 1

$(".level1 :visible") is a descendant selector: you are selecting all visible elements that are descendants of .level1. There are three div elements that are visible beneath .level1 elements.

Use this instead:

$(".level1:visible").length;

See your fiddle per my update.

Answer 2

Pretty sure you need to do $(".level1:visible").length;

the Space is breaking the code