CODEWITHSUNDEEP
jquerycount
swan
swan

Reputation: 2599

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

Upvotes: 5

Views: 13530

Answers (4)

Therichpost
Therichpost

Reputation: 1815

You can also try with below code:

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

Upvotes: 0

Reigel Gallarde
Reigel Gallarde

Reputation: 65264

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;
  });

Upvotes: 5

rahul
rahul

Reputation: 187030

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>'
});

Upvotes: 0

Scott Evernden
Scott Evernden

Reputation: 39926

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

Upvotes: 0

Related Questions