使用jQuery计算div中div的数量

Question

我有以下输出：

<section class="group">
  <div class="header">Header 1</div>
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
  </div>    
</section>

<section class="group">
  <div class="header">Header 2</div>
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
      <div class="item">item4</div>
      <div class="item">item5</div>
    </div>   
</section>

我想使用jQuery告诉我每个.item中有多少<section>个元素。目前正在尝试这个，但它没有给我正确的数字：

$('section.group').each(
  function() {
    alert($(this).length);
  }
);

Answer 1

尝试：

$('section.group').each(
  function() {
    alert($('.item', $(this)).length);
  }
);

[Working Example]

或者

$('section.group').each(
  function() {
    alert(($(this).find('.item')).length);
  }
);

[Working Example]

---

您正在迭代各个部分，但您错过了使用类item来计算元素：）

---

有用的链接：

• jQuery Context
• jQuery find() method

Answer 2

你需要看看＆＃39; .item＆＃39;在 this 的上下文中。 此的长度为1，因为这是＆＃39; section.group＆＃39;

$('section.group').each(
  function() {
    alert($('.item',this).length);
  }
);​

请在此处查看选择器上下文标题：http://api.jquery.com/jQuery/

Answer 3

请改为尝试：

$('section').each(function() {
    alert($('.item', this).length);
});​

演示：http://jsfiddle.net/aXVqM/

Answer 4

查看以下示例。 http://jsfiddle.net/ricardolohmann/KMgtZ/

Answer 5

$('section.group').each(
  function() {
    alert($(this).children('.item').length);
  }
);

这会比其他的更快......我想

Answer 6

试试这个。

$('.change').click(function () {
     var lng = $(".item").length;
            $('.change ').height(function (index, height) {
                return (height * lng);
                //alert(height);
            });

     alert(lng);
        });

.change是div的类，你要改变它的高度或宽度 您可以在此处查看如何实施：http://jsfiddle.net/sahilosheal/572WV/

Answer 7

$(".group").find(".item").length

这是最简单的单行解决方案。

Answer 8

我已经更改了第二节类名的名称 看这里的演示：

$('section').each(function() {
    var numItems = $('.group').children('div.item').length;

    alert(numItems+''); 
});

$('section').each(function() {
    var numItems = $('.group1').children('div.item').length;

    alert(numItems+''); 
});

请参阅this demo。