Contar el total de hijos divs dentro de un contenedor

Question

Quiero contar el total de divs dentro de un contenedor y alternar sus visibilidades con una estructura como esta. Tenga en cuenta también que div.content también puede residir dentro de otros contenedores anidados o incluso jerarquizados anidados. Es por eso que lo manejo con jQuery para agregar div.topmost para cada contenedor primario superior:

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

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

Pero no puedo hacer que funcione de bucle para cada div. mostrador. El contador siempre muestra todos los div.content. Por lo tanto, se supone que el problema es colocar cada función.

Cualquier hepatitis sería muy apreciada.

Gracias

Answer 1

intento:

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

Answer 2

para agarrar el recipiente superior que puede hacer

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

Creo que la siguiente lo hará por usted

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

Edición

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

Answer 3

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

Answer 4

También puede probar con el código de abajo:

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