計數一個容器內的子容器總數

我想計算一個容器內的總容器數，並用這樣的結構來切換它們的可見性。另請注意，div.content也可能駐留在另一個嵌套或甚至嵌套嵌套的容器中。這就是爲什麼我用jQuery的處理，以增加div.topmost每個最頂層父容器：計數一個容器內的子容器總數

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

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

但我不能使它工作循環的每個格。計數器。櫃檯始終顯示所有div.content。因此，放置每個功能被懷疑是問題所在。

任何hep都會非常感激。

感謝

來源

2010-04-21 swan

嘗試：

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

來源

2010-04-21 06:00:00 Reigel

謝謝，但它忽略了嵌套或嵌套嵌套容器內的div.content。它只計算頂級div.content，而不是嵌套內容。差不多了。謝謝 – swan 2010-04-21 06:09:06

但改變孩子找到了訣竅！謝謝。請改變孩子去找，所以我可以標記你的答案爲我的問題。我需要每個功能都不好:) – swan 2010-04-21 06:11:29

現在很高興它適合你... – Reigel 2010-04-21 06:16:03

搶你可以做的最頂層容器

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

編輯

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

來源

2010-04-21 05:51:24 rahul

謝謝，但我希望輸出的計數外click事件。任何提示？ – swan 2010-04-21 05:58:14

嘗試編輯後的版本。 – rahul 2010-04-21 06:06:34

謝謝，就像@Reigel。而他的回答就是這樣做的，只是錯過了「尋找」的「孩子」。 – swan 2010-04-21 06:16:16

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

等

來源

2010-04-21 05:55:55

這仍然只包括頁面中的總體div.content。謝謝 – swan 2010-04-21 06:04:18

您也可以嘗試用下面的代碼：

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

來源

2016-11-05 16:10:50 Aaron

計數一個容器內的子容器總數

回答

相關問題