Policz całkowitą liczbę div dzieci wewnątrz kontenera

Question

Chcę policzyć całkowitą liczbę div wewnątrz kontenera i zmienić ich widoczność za pomocą struktury takiej jak ta. Należy również pamiętać, że div.content może również znajdować się w innych zagnieżdżonych lub nawet zagnieżdżonych kontenerach. Dlatego poradzić z jQuery, aby dodać div.topmost dla każdego najwyższego kontenera nadrzędnego:

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

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

Ale nie może to działać w pętli dla każdego div. licznik. Licznik zawsze pokazuje całą zawartość div.content. Zatem podejrzenie, że każda funkcja jest podejrzana, stanowi problem.

Każde hep byłoby bardzo doceniane.

Dzięki

Answer 1

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

Answer 2

Aby pobrać najwyższą pojemnik można zrobić

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

myślę dodaje zrobi to za ciebie

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

Edycja

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

itp

Answer 4

Można też spróbować z poniższym kodzie:

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