获取同一类的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>

有没有办法直接从控制器添加它？我需要一个可以在新数据到达时每秒完成/刷新的快速函数

编辑

我正在使用语义 UI，因此我只需将 data-tooltip="x" 添加到 div 或 span 或其他以显示工具提示。 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

这里，你可以尝试使用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>

使用countChildsByClass('orangeDIV')[0]只能得到orangeDIV的第一个孩子