Question

我想计算容器内的总div数，并用这样的结构切换它们的可见性。另请注意，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.counter循环。计数器始终显示所有div.content。因此怀疑放置每个功能是个问题。

非常感谢任何人。

由于

Answer 1

尝试：

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

抓住最顶层的容器

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

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

等

Answer 4

您也可以尝试使用以下代码：

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

计算容器内的总子div数

4 个答案: