Tengo una página con dos grupos de filtros: uno por tema y otro por formato. El filtro debe seleccionar las tarjetas asociadas y mostrarlas conservando los encabezados de sección respectivos en los que se encuentran las tarjetas. Si no se encuentran resultados, se muestra un div "sin resultados".

Lo tengo configurado y esto funciona en su mayor parte. Sin embargo, me di cuenta de que en mi grupo de filtro de "formato" * solo el primer elemento conserva los encabezados del grupo: los otros elementos de filtro combinan todas las tarjetas mientras agregan algunos encabezados de sección aleatorios. Por mi vida, no puedo entender lo que está pasando.

*Puse todo en este Codepen aquí .

No estoy seguro de si se descarta en alguna parte debido a que esta sección usa la referencia principal.

 $(".card").hide().filter($filteredResults).show(); var all_hidden = true; $(".card").each(function (index) { if ($(this).is(":visible")) { all_hidden = false; $(this).parent().prev(".section-header").css("display", "block"); } else { console.log("this happened"); $(this).parent().prev(".section-header").css("display", "none"); } });