Đếm tổng số div trẻ em bên trong một thùng chứa

Question

Tôi muốn đếm tổng số div bên trong một vùng chứa và chuyển đổi độ nhớt của chúng với cấu trúc như thế này. Cũng xin lưu ý rằng div.content cũng có thể nằm bên trong một vùng chứa lồng nhau hoặc lồng nhau khác. Đó là lý do tại sao tôi xử lý nó với jquery để thêm div.topmost cho mỗi thùng phụ huynh trên cùng:

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

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

Nhưng tôi không thể làm cho nó hoạt để lặp cho mỗi div. quầy tính tiền. Bộ đếm luôn hiển thị tất cả div.content. Vì vậy, việc đặt từng chức năng bị nghi ngờ là vấn đề.

Bất kỳ loại gan nào sẽ được đánh giá rất nhiều.

Cảm ơn

Answer 1

thử:

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

Để lấy container trên cùng bạn có thể làm

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

Tôi nghĩ rằng sau đây sẽ làm điều đó cho bạn

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

Sửa

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

vv

Answer 4

Bạn cũng có thể thử với mã bên dưới:

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