jquery - 使用 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);
  }
);

[工作示例]

或者

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

[工作示例]

---

您正在迭代各个部分，但您缺少对具有类的元素进行计数item:)

---

有用的网址：

• jQuery 上下文
• jQuery find() 方法

Answer 2

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

这是最简单的一条线解决方案。

Answer 3

您需要在this的上下文中查看“.item” 。this的长度为 1，因为 this = 'section.group'

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

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

Answer 4

试试这个：

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

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

Answer 5

看下面的例子。 http://jsfiddle.net/ricardolohmann/KMgtZ/

Answer 6

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

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

Answer 7

试试这个。

$('.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 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+''); 
});

请参阅此演示。