Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Count total children divs inside a container

Tags:

jquery

count

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 </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

like image 255
swan Avatar asked Apr 21 '10 05:04

swan


1 Answers

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;
  });
like image 90
Reigel Avatar answered Nov 14 '22 08:11

Reigel