具有相同名称和相同父级的div数，单独返回计数

Question

如何编写一个jquery代码，以便用类＆＃34; aaa＆＃34;来查找div的个别计数。在div和class＆＃34; section-block＆＃34; ？ 我希望答案分别为4和3。 请帮忙

           <div class="section-block">
                            <div class="aaa"></div>
                            <div class="aaa"></div>
                            <div class="aaa"></div>
                            <div class="aaa"></div>
            </div>
            <div class="section-block">
                            <div class="aaa"></div>
                            <div class="aaa"></div>
                            <div class="aaa"></div>
            </div>

Answer 1

$('.section-block').map(function(){
    $(this).find('.aaa').length;
})

这适用于任意数量的区块。

Answer 2

尝试以下内容。

$(document).ready(function() {
  $(".section-block").each(function() {
    var nbOfDivs = $(this).find(".aaa").length ;
    
    console.log(nbOfDivs) ;
  }) ;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section-block">
                <div class="aaa"></div>
                <div class="aaa"></div>
                <div class="aaa"></div>
                <div class="aaa"></div>
</div>
<div class="section-block">
                <div class="aaa"></div>
                <div class="aaa"></div>
                <div class="aaa"></div>
</div>

Answer 3

// this gives total overall, result = 7
console.log( 
  $('.section-block').children('.aaa').length 
);

// one by one result = 4 and 3
$('.section-block').each(function(){
   console.log($(this).children('.aaa').length );
});

// this is for accessing of your interest
// result = 4
console.log(
  $('.section-block:eq(0)').children('.aaa').length
);

// 2nd one
// result = 3
console.log(
  $('.section-block:eq(1)').children('.aaa').length
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section-block">
  <div class="aaa"></div>
  <div class="aaa"></div>
  <div class="aaa"></div>
  <div class="aaa"></div>
</div>
<div class="section-block">
  <div class="aaa"></div>
  <div class="aaa"></div>
  <div class="aaa"></div>
</div>