jQuery: Zugriff auf eine einzelne Instanz einer Klasse in einer dynamisch erstellten Tabelle

Question

Ich habe viele automatisch generierte Tabelle und diese Tabellen haben ein <span class="productNumber"> Element in der thead, die die Anzahl der Produkte in der Tabelle zeigt. (Im Moment ist dies in PHP über <?php count($products); ?> getan).

Ich schrieb einen Filter, um Benutzern zu helfen, diese Tabellen zu navigieren. Der Filter ermöglicht dem Benutzer, eine Produktkategorie zu wählen, und alle tr Elemente, die diese Produktkategorie nicht haben, erhalten die Bootstrap-Klasse hidden.

Ich möchte jetzt jQuery verwenden, um die tatsächlich sichtbaren Elemente für jede Tabelle zu zählen und die Anzahl der tatsächlich sichtbaren Elemente anzuzeigen.

Mein aktueller Ansatz ist dies:

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

Das Problem ist, dass diese alle .productNumber Elemente mit dem gleichen Wert überschrieben (die Anzahl der sichtbaren Produkte in der allerletzten table).

Ich versuchte es auf verschiedene Weise ($('.productNumber', this), $('.productNumber')[0], etc.), war aber nicht in der Lage zu schreiben, nur für die aktuellen table ‚s .productNumber ändern.

Answer 1

Der einfache Weg, dies zu tun:

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

Englisch-Übersetzung:

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 

Answer 2

Verwendung dieser Selektor

$(this).children('.productNumber').html(counter); 

Answer 3

Mein Proof of Concept. https://jsfiddle.net/dewwwald/8gn5jdsL/1/

Das Problem wird gelöst, indem man dies der Suche nach der Produktnummer angibt. unter der Annahme, Produktnummer ist in der tr. Auch wenn Sie Ihre Anforderungen beschreiben, habe ich gelesen, dass this.hasClass("hidden") eine haben sollte! so !this.hasClass("hidden").

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

})