计算 table 中具有特定 class 的单元格中的跨度 (ES5)

Question

我正在尝试计算所有具有特定 class 且包含特定 class

跨度的单元格

这是我的 td 结构：

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

我希望能够遍历整个 table 并获得所有 .Yellow > span.glyphicon-exclamation-sign

最后，执行 .count()

我试过 table.cells('.Yellow').count() 但这只考虑 td 和 .Yellow

Answer 1

您可以通过以下...

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

Answer 2

试试这个：

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>

计算 table 中具有特定 class 的单元格中的跨度 (ES5)

Count Span(s) in cells with a specific class within a table (ES5)

javascript

jquery

datatables

ecmascript-5