Получите номер div с тем же классом

Question

Я работаю на странице в реальном времени, которая отображает новый очень маленький цветный div каждую секунду. Цвет может быть зеленым, оранжевым или красным.

Я хотел бы добавить всплывающую подсказку на mouseover над цветом, чтобы отобразить количество DIV он содержит.

я бы просто использовал этот

$(".myClass").length 

, но цвет может быть показан несколько раз на линии

В этом случае, мне нужно знать количество DIV внутри первая оранжевая секция и внутри второй оранжевой секции

Например:

зеленый - 2

Оранжевый - 4

зеленый - 5

красный - 4

Оранжевый - 2

зеленый - 2

AngularJS - Контроллер

Я использую AngularJS, которые извлекают эти данные из API. Я получаю массив строк JSON.

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> 

Есть ли способ, чтобы добавить его прямо из контроллера? Мне нужна быстрая функция, которая может быть сделано/обновляется каждую секунду, когда новые данные прибывают

EDIT

Я использую Семантический интерфейс, таким образом, я просто добавить data-tooltip="x" к DIV или диапазона или другой, чтобы отобразить подсказка.x следует заменить на число DIV

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, что вы можете попробовать использовать 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

<div class="orangeDIV"> 
    <div class="myDIV"></div> 
    <div class="myDIV"></div> 
    <div class="myDIV"></div> 
    <div class="myDIV"></div> 
    <div class="myDIV"></div> 
</div> 
<div class="orangeDIV"> 
    <div class="myDIV"></div> 
    <div class="myDIV"></div> 
    <div class="myDIV"></div> 
</div> 

Вы можете получить только первые orangeDIV 's детей с помощью countChildsByClass('orangeDIV')[0]