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

Question

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

我编写了一个过滤器来帮助用户导航这些表。该过滤器允许用户选择产品类别和所有 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 .

Answer 1

执行此操作的简单方法:

$("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