jqueryで同じクラスの複数のdiv要素をカウントするにはどうすればいいですか

Question

すべての「親」エレメンツに5つの子要素が必要です。 "parent" divの子が "child"クラスの子が5つ未満の場合は、それらをすべて削除します。これは、結果はどうあるべきかである

<div class="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

<div class="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

<div class="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

：ここ

は、前の例だ

<div class="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

<div class="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

<div class="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

Answer 1

最初にすべて.parentを選択し、each()を使用してすべてのコンテンツを取得します。ループでは、追加が必要な要素の数を計算できます。 5 - count of exist childは、追加が必要な要素の数です。

$(".parent").each(function(){ 
 
    var count = $(this).children(".child").length; 
 
    for (var i = 0; i < 5 - count; i++){  
 
     $(this).append("<div class='child'>Added Child</div>"); 
 
    } 
 
});

.parent { 
 
    width: 100px; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent"> 
 
    <div class="child">Child</div> 
 
    <div class="child">Child</div> 
 
    <div class="child">Child</div> 
 
    <div class="child">Child</div> 
 
</div> 
 
<div class="parent"> 
 
    <div class="child">Child</div> 
 
    <div class="child">Child</div> 
 
    <div class="child">Child</div> 
 
</div> 
 
<div class="parent"> 
 
    <div class="child">Child</div> 
 
    <div class="child">Child</div> 
 
    <div class="child">Child</div> 
 
    <div class="child">Child</div> 
 
    <div class="child">Child</div> 
 
</div>

Answer 2

は、最大カウントを取得し、その追加のdiv要素を追加

// get maximum count of children in parent 
 
var count = Math.max.apply(Math, $('.parent').map(function() { 
 
    return $('.child', this).length; // get child count 
 
    }).get()) 
 
    // if maximum count is fixed then above code can be avoided 
 
    // instead set `count = 5;` 
 

 
// iterate parent 
 
$('.parent').each(function() { 
 
    var len = count - $('.child', this).length; // get number of div tobe added 
 
    for (var i = 0; i < len; i++) { // add childrens 
 
    // generate div using jQuery and append it to parent 
 
    $('<div/>', { 
 
     class: 'child' 
 
    }).appendTo(this); 
 
    } 
 
});

.parent { 
 
    border: 1px solid black; 
 
} 
 
.child { 
 
    border: 1px solid red; 
 
    height: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div>

に基づきます