javascript - 获取同类别的div个数

Question

我正在开发一个实时页面，每秒显示一个新的非常小的彩色 div。 颜色可以是绿色、橙色或红色。

我想在 mouseover 上添加一个工具提示，以显示它包含的 div 的数量。

我会简单地使用这个

$(".myClass").length

但是颜色可以在线上显示多次

在这种情况下，我需要知道第一个橙色部分和第二个橙色部分内的 div 数量

例如:

绿色 - 2

橙色 - 4

绿色 - 5

红色 - 4

橙色 - 2

绿色 - 2

AngularJS - Controller

我正在使用从 API 检索这些数据的 AngularJS。我收到一个 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>

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

编辑

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

You can get only first orangeDIV's children by using countChildsByClass('orangeDIV')[0]