同じ名前と同じ親を持つdivの個数、個別に返す回数

Question

クラス "section-block"を持つdivの両方でクラス "aaa"を持つdivの個数を見つけるためにjqueryコードを書く方法？ 答えがそれぞれ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>