计数一个容器内的子容器总数

我想计算一个容器内的总容器数，并用这样的结构来切换它们的可见性。另请注意，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

计数一个容器内的子容器总数

回答

相关问题