Holen Sie sich die Nummer der Div mit der gleichen Klasse

Question

Ich arbeite an einer Echtzeit-Seite, die jede Sekunde neue sehr kleine farbige div anzeigen. Die Farbe kann grün, orange oder rot sein.

Ich möchte einen Tooltip mouseover über eine Farbe hinzufügen, um die Anzahl von div enthält es angezeigt werden soll.

würde ich einfach diese

$(".myClass").length 

verwendet haben, aber die Farbe kann mehrere Mal auf der Linie

In diesem Fall gezeigt werden, muss ich die Anzahl der div wissen innen der erste orange Abschnitt und innerhalb des zweiten orange Abschnitts

Zum Beispiel:

Grün - 2

orange - 4

Green - 5

Rot - 4

orange - 2

Green - 2

AngularJS - Controller

Ich benutze AngularJS, die diese Daten von einer API abrufen. Ich erhalte ein JSON-Array mit einer Zeichenfolge.

colors : ["0", "2", "3"] //0:red - 2:green - 3:orange 

HTML

<div ng-repeat="s in d.colors track by $index" class="status-box" ng-class="{'redStatus' : s == '0', 'greenStatus' : s == '2', 'orangeStatus' : s == '3'}"></div> 

Gibt es eine Möglichkeit, es von der Steuerung direkt hinzufügen? Ich brauche eine schnelle Funktion, die getan werden kann/jede Sekunde aktualisiert, wenn neue Daten

EDIT

I Semantic UI kommen also verwende ich muss nur data-tooltip="x" zu einem div oder Spanne hinzufügen oder andere die angezeigt werden Tooltip.x sollte durch die Anzahl der div ersetzt werden

ERSTELLT HTML

<div ng-repeat="c in l.colors track by $index" class="status-box ng-scope greenStatus" data-tooltip="TESTING" ng-class="{'redStatus' : c == '0', 'greenStatus' : c == '2', 'orangeStatus' : c == '3'}"></div> 
<div ng-repeat="c in l.colors track by $index" class="status-box ng-scope greenStatus" data-tooltip="TESTING" ng-class="{'redStatus' : c == '0', 'greenStatus' : c == '2', 'orangeStatus' : c == '3'}"></div> 
<div ng-repeat="c in l.colors track by $index" class="status-box ng-scope orangeStatus" data-tooltip="TESTING" ng-class="{'redStatus' : c == '0', 'greenStatus' : c == '2', 'orangeStatus' : c == '3'}"></div> 
<div ng-repeat="c in l.colors track by $index" class="status-box ng-scope orangeStatus" data-tooltip="TESTING" ng-class="{'redStatus' : c == '0', 'greenStatus' : c == '2', 'orangeStatus' : c == '3'}"></div> 
<div ng-repeat="c in l.colors track by $index" class="status-box ng-scope orangeStatus" data-tooltip="TESTING" ng-class="{'redStatus' : c == '0', 'greenStatus' : c == '2', 'orangeStatus' : c == '3'}"></div> 
<div ng-repeat="c in l.colors track by $index" class="status-box ng-scope orangeStatus" data-tooltip="TESTING" ng-class="{'redStatus' : c == '0', 'greenStatus' : c == '2', 'orangeStatus' : c == '3'}"></div> 
<div ng-repeat="c in l.colors track by $index" class="status-box ng-scope greenStatus" data-tooltip="TESTING" ng-class="{'redStatus' : c == '0', 'greenStatus' : c == '2', 'orangeStatus' : c == '3'}"></div> 
<div ng-repeat="c in l.colors track by $index" class="status-box ng-scope greenStatus" data-tooltip="TESTING" ng-class="{'redStatus' : c == '0', 'greenStatus' : c == '2', 'orangeStatus' : c == '3'}"></div> 
<div ng-repeat="c in l.colors track by $index" class="status-box ng-scope greenStatus" data-tooltip="TESTING" ng-class="{'redStatus' : c == '0', 'greenStatus' : c == '2', 'orangeStatus' : c == '3'}"></div> 
<div ng-repeat="c in l.colors track by $index" class="status-box ng-scope greenStatus" data-tooltip="TESTING" ng-class="{'redStatus' : c == '0', 'greenStatus' : c == '2', 'orangeStatus' : c == '3'}"></div> 
<div ng-repeat="c in l.colors track by $index" class="status-box ng-scope greenStatus" data-tooltip="TESTING" ng-class="{'redStatus' : c == '0', 'greenStatus' : c == '2', 'orangeStatus' : c == '3'}"></div> 

Answer 1

Heres, was Sie versuchen können, jQuery

JS

var c = 0; 
function countChildsByClass(className) { 
    var n = 0, 
     array = []; 
    n = $('.' + className)[c].children.length; 
    array.push(n); 
    c++; 
    return array; 
} 
console.log(countChildsByClass('orangeDIV')); //Outputs array [5, 3] = [child in first orangeDIV, child in second orangeDIV] 

HTML

mit

Sie können nur erste bekommen orangeDIV 's von Kindern countChildsByClass('orangeDIV')[0]