表中具有特定类的单元格中的计数跨度(ES5)

Question

我正在尝试计数所有具有特定类并包含具有特定类的span的单元格

下面是我的td结构:

<td class="Yellow">
 Hello Kitty 
<span class="glyphicon glyphicon-exclamation-sign" title="Invalid!"></span>
</td>

我希望能够遍历整个表并获取所有.yellow>； span.glyphicon-感叹号-符号

最后，执行。count（）

我尝试了table.cells('.yellow').count()，但这只考虑了带有.yellow的td

Answer 1

请尝试以下步骤:

null

var count = 0; //init count is 0

$( "table .Yellow" ).each(function() { // loop through Yellow
    var _block = $(this);
  $( _block).children().each(function() { // loop through childrens 
    if($(this).hasClass("glyphicon")) { //if child has 'glyphicon' class
        count ++; // increase the count by 1
    }
    });
});

$(".indicator").html(count); // show the count

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Table added with two rows. Each row has two TDs with one TD has class "Yellow".</br>
Counting .Yellow > .glyphicon items count using jquery.</br>
Expected output should be "2".

<table>
<tr>
<td class="Yellow">
<span class="glyphicon glyphicon-exclamation-sign" title="Invalid!"></span>
</td>
 <td>
<span class="glyphicon glyphicon-exclamation-sign" title="Invalid!"></span>
</td>
</tr>
<tr>
  <td class="Yellow">
<span class="glyphicon glyphicon-exclamation-sign" title="Invalid!"></span>
</td>
 <td>
<span class="glyphicon glyphicon-exclamation-sign" title="Invalid!"></span>
</td>
</tr>
</table>


<div class="indicator"></div>

Answer 2

你可以跟着…。

let count=document.querySelectorAll('.Yellow > span.glyphicon-exclamation-sign').length