finding amount of children using size() in jquery

Question

I have a jquery menu that has so many entries that it extends further than the length of the page. I want to get the amount of entries in each menu section so I can use that number to resize a padding div at the end of the page.

$('.hideMe').click(function(){ 
    alert( $(this).next('ul').children() );
});

So I want to find out the amount of li tags under the ul tag.

<h3 class="hideMe">Items</h3>
    <ul class="myul">
        <li id="001" >
            <a href="products.php?item=001">Item 1</a>
        </li>
        <li id="002" >
            <a href="products.php?item=002">Item 2</a>
        </li>   
        <li id="003" >
     <a href="products.php?item=003">Item 3</a>
        </li>

Any ideas? Thanks.

Answer 1

What about this:

$(this).next('ul').find('li').length

?

Answer 2

$(".hideMe").click(function(){ 
    alert( $(this).next("ul").find("li").length);
});

But rather I'd do $(this).next("ul").height() to get the height right away.

Answer 3

I'd agree with the answer provide by Staicu (And I've voted it up), but you need to consider whether the number of children is sufficient information for what you want to do.

Don't forget to allow for different monitor resolutions and the fact that the size (More specifically to your case - the height) of the browser window can change.

I'm not completely sure what role the 'padding div' plays in the overall layout - maybe a more detailed example would help us to understand.