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

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

修改

我正在使用Semantic 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>

  

您只能使用orangeDIV

获得第一个countChildsByClass('orangeDIV')[0]的孩子