javascript - jQuery:在动态创建的表中访问类的单个实例

我有许多自动生成的表，并且这些表在<span class="productNumber">中都有一个thead元素，用于显示表中的产品数量。 （现在这是通过<?php count($products); ?>在php中完成的）。

我写了一个过滤器来帮助用户浏览这些表。该过滤器允许用户选择产品类别，所有不具有该产品类别的tr元素都将获得Bootstrap类hidden。

我现在想使用jQuery来计算每个表的实际可见元素，并显示实际可见元素的数量。

我当前的方法是这样的：

$('table').each(function(){
    let counter = 0;
    $('tr', this).each(function(){
        if (this.hasClass("hidden")) {
            counter++;
        };
    });
    $('.productNumber').html(counter);
})

问题在于这将覆盖所有具有相同值（最后一个.productNumber中可见产品的数量）的table元素。

我尝试以各种方式（$('.productNumber', this)，$('.productNumber')[0]等）对其进行修改，但无法仅写入当前table的.productNumber。

最佳答案

执行此操作的简单方法：

$("table").each(function(){
    var count = $(this).find("tr:not([class*='hidden'])").size();
    $(this).find(".productNumber").first().html(count);
});

英文翻译：

For each table:
    Get the number of tr's that don't have "hidden" defined in
    it's class attribute and assign to the count variable.
    Find the first ".productNumber" cell in the table and set its
    content