Question

I am using lists in my sidebar, and I want to display a label number of how many items are in that list.

I have created a JSFiddle here http://jsfiddle.net/WRVgW/ to demonstrate the list and what I am trying to achieve. I am sure this is achievable with Jquery but I am not sure how and looking for some guidance.

In my example I have hardcoded in the number 34 where I want the number to be dynamically generated based on the list below it.

My HTML Code which I commented is pasted below but maybe easier to see it in context with the result in the http://jsfiddle.net/WRVgW/

<div id="sidebar">
<ul class="sidebarSections">
    <li class="submenu">
    <a href="#"><span>Design Projects</span><!--This is the name of the project-->
    <span class="label">34</span></a><!--This is the number which I want to display the number of li items below dynamically (should be 3)-->
        <ul>
            <li><a>Project x</a></li>
            <li><a>Project y</a></li>
            <li><a>Project z</a></li>
        </ul>
    </li>

    <li class="submenu">
    <a href="#"><span>Tech Projects</span><!--This is the name of the project-->
    <span class="label">34</span></a><!--This is the number which I want to display the number of li items below dynamically (should be 5)-->
        <ul>
            <li><a>Project x</a></li>
            <li><a>Project y</a></li>
            <li><a>Project z</a></li>
            <li><a>Project y</a></li>
            <li><a>Project z</a></li>
        </ul>
    </li>

    <li class="submenu">
    <a href="#"><span>IA Projects</span><!--This is the name of the project-->
    <span class="label">34</span></a><!--This is the number which I want to display the number of li items below dynamically (should be 7)-->
        <ul>
            <li><a>Project x</a></li>
            <li><a>Project y</a></li>
            <li><a>Project z</a></li>
            <li><a>Project y</a></li>
            <li><a>Project z</a></li>
            <li><a>Project y</a></li>
            <li><a>Project z</a></li>
        </ul>
    </li>
</ul>

Answer 1

One possible solution:

$(".submenu .label").text(function() {
  return $(this).closest(".submenu").find("li").length;
});

DEMO: http://jsfiddle.net/WRVgW/1/