jQuery计算具有特定类的div中具有特定类的div的数量答案

【问题标题】：jQuery count number of divs with a particular class inside a div with a particular classjQuery计算具有特定类的div中具有特定类的div的数量
【发布时间】：2014-09-08 14:19:01
【问题描述】：

我如何计算类 item 的 div 中类 outer-1 的 div 的数量？这里的结果应该是 7。

我尝试了这个和其他几个失败的变体。

alert( $(".outer-1").$(".item").length );

这给了我12，这是页面上的所有 div。 alert( $(".item").length );

我怎样才能只指定outer-1 div？

Divs

<div class="outer-1">
    <div class="item">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
    <div class="item">d</div>
    <div class="item">e</div>
    <div class="item">f</div>
    <div class="item">g</div>
</div>

<div class="outer-2">
    <div class="item">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
    <div class="item">d</div>
    <div class="item">e</div>
</div>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

使用find() 选择器：

$(".outer-1").find(".item").length ;

或

 $(".outer-1 .item").length

【讨论】：

或$(".outer-1 .item").length :)

【解决方案2】：

对于您的 html，$(".outer-1 .item").length 就足够了，但如果 div.items 是嵌套的，像这样

<div class="outer-1">
    <div class="item">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
    <div class="item">d</div>
    <div class="outer-x">
      <div class="item">h</div>
      <div class="item">i</div>
    </div>
    <div class="item">e</div>
    <div class="item">f</div>
    <div class="item">g</div>
</div>

您可能想要使用$(".outer-1 > .item").length（所有div.item 是div.outer-1 的子级）。

See jsFiddle

【讨论】：

【解决方案3】：

如果你有一堆同名的外层，你可能需要循环：

$('.outer-1').each(function(){
   console.log( $('.item',this).length );
});

【讨论】：