각 함수 내부의 총 요소 수는 어떻게 계산합니까?

Question

내 각 함수 안에는 div에서 텍스트를 가져 와서 부모 요소에 클래스로 추가 한 다음 해당 클래스가 몇 개 있는지 계산해야합니다. 문제는 내 총 기능을 제공하는 대신 점진적으로 계산할 때 각 기능에 포함되어 있기 때문에 발생합니다.

당신은

<div class="parent"> 
    <div class="nid">asdf</div> 
</div> 

<div class="parent"> 
    <div class="nid">asdf</div> 
</div> 

<div class="parent"> 
    <div class="nid">asdf</div> 
</div> 

<div class="parent"> 
    <div class="nid">qwerty</div> 
</div> 

<div class="parent"> 
    <div class="nid">qwerty</div> 
</div> 

<div class="parent"> 
    <div class="nid">zxcv</div> 
</div> 

<div class="parent"> 
    <div class="nid">ghjk</div> 
</div> 

<div class="numbers"> 

</div> 

내 jQuery를

$(".nid").each(function() { 
    var nid = $(this).text(); 
    $(this).parent().addClass(nid); 
    var nidCount = $(".parent."+nid).length; 
    $('.numbers').append(nidCount); 
}); 

에게 출력이 1,231,211 것을 내 바이올린에보고 내가 무엇을 얻으려고하는 것은 3211.

My Fiddle

내 HTML입니다 수 있습니다

Answer 1

시도

var counter = {}; 
$(".nid").each(function() { 
    var text = $(this).text(); 
    var count = counter[text] || 0; 
    counter[text] = count + 1; 
}); 
$.each(counter, function(key, value){ 
    $('.numbers').append(value); 
}) 

데모 : Fiddle

Answer 2

두 클래스 사이에 쉼표를 넣으십시오 ..

var nidCount = $(".parent,."+nid).length; 

Answer 3

루프 내에서 매번 카운트가 발생합니다. 따라서 첫 번째에 대해서는 모두 asdf, 1이면 두 번째, 2 등의 경우 모두 asdf입니다. 루프에 카운트를 저장할 수 있으며 가능한 한 객체로 저장할 수 있습니다. 그런 다음 루프가 끝나면 카운트를 인쇄하십시오.

nids를 집계하고 부모에게 클래스를 추가 한 다음 집계 nid를 반복하는 두 번째 루프에서 특정 클래스를 가진 부모의 수를 계산할 수 있습니다.

Answer 4

DIV를 계산할 때마다 스크립트에 nidCount ~ .numbers이 추가됩니다. 이 같은 당신이해야 할 것입니다 :

var numbers = {}; 
$(".nid").each(function() { 
    var nid = $(this).text(); 
    $(this).parent().addClass(nid); 
    var nidCount = $(".parent."+nid).length; 
    numbers[nid] = nidCount; 
}); 

for (var key in numbers) { 
    $('.numbers').append(numbers[key]); 
}