Count total children divs inside a container

I want to count the total divs inside a container and toggle their visibilities with structure like this. Please also note that the div.content may also reside inside another nested or even nested-nested containers. That's why I handle it with jquery to add div.topmost for each topmost parent container:

<div id="parent">
  <div class="counter">There are 3 div.contents inside the container below</div>
  <div class="container">
    <div class="content"> 1 </div>
    <div class="container"> <!--container inside container -->
      <div class="content"> 2 </div>
      <div class="content"> 3 </div>
    </div>
  </div>

  <div class="counter">There are 5 div.contents inside the container below</div>
  <div class="container">
    <div class="content"> 1 &l开发者_StackOverflowt;/div>
    <div class="content"> 2 </div>
    <div class="content"> 3 </div>
    <div class="content"> 4 </div>
    <div class="content"> 5 </div>
  </div>
</div>

And the jquery:

  // only grab the top most container
  $('#parent > .container').addClass('topmost');
    var topMost = $(".topmost");
    var totContent = topMost.children('.content').size();

    if (topMost.length > 0) {
      topMost.before('<div class="toggle">There are ' + totContent + ' div.contents inside the container below</div>');
    }

   topMost.hide();

  $('#parent > .counter').click(function() {
    $(this).next('.topmost').toggle();
    //alert(totContent);
     return false;
  });

But I can't make it work to loop for each div.counter. The counter always shows all div.content. So placing the each function is suspected to be the problem.

Any hep would be very much appreciated.

Thanks

try:

 // only grab the top most container
  $('#parent > .container').addClass('topmost');
    var topMost = $(".topmost");

    topMost.each(function(){
      var totContent = $(this).find('.content').size();

      if (totContent > 0) {
        $(this).before('<div class="toggle">There are ' + totContent + ' div.contents inside the container below</div>');
      }

   })

   topMost.hide();

  $('#parent > .counter').click(function() {
    $(this).next('.topmost').toggle();
    //alert(totContent);
     return false;
  });

var topmost = $('#parent > .container');
var totContent = topmost.find('.content').length;
if (topMost.length > 0) {
    topmost.before('<div class="toggle">There are ' + totContent + ' div.contents inside the container below</div>');
}

etc

To grab the topmost container you can do

$("#parent > div.container").eq(0);

I think the following will do it for you

$('#parent > div.counter').click(function() {
    var container = $(this).next('div.container').toggle();
    var totContent = container.find("div.content").length;
    alert (totContent);
     return false;
  });

Edit

$("#parent > div.container").each(function(){
    var currentElem = $(this);
    var totContent = currentElem.find("div.content").length;
    currentElem.before('<div class="toggle">There are ' + totContent + ' div.contents inside the container below</div>'
});

You can also try with below code:

$("#parent").each(function() {
var total = $(this).find("div").length;
});