Geek Answers Handbook

Count the total number of children in the container

I want to count the total number of divs inside a container and switch their visibility with a structure like this. Also note that div.content can also be inside other nested or even nested nested containers. This is why I process 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 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 get it to work for a loop for each div.counter. The counter always shows all div.content. Thus, it is believed that the problem is associated with each function.

Any hep would be greatly appreciated.

thank

+5
source share
4 answers

to 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;
  });
+5
source

,

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

,

$('#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>'
});
0
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>');
}

..

0

:

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

More articles:


All Articles