过滤时如何在页面上保留一些元素？

Question

我找到了一个不错的过滤器，并在我的小家庭作业中使用了它。 我想在过滤期间保持 h2 元素可见，如果它不为空的话。 以为可以使用多个数据ID，但它对我不起作用。 我很好奇其他人可能对我有什么解决方案。

---

编辑：我想稍微改变一下问题。 过滤时不应有空的 header。

因此，当 data-pobocka="XY" 的下一个元素为空时，我可能正在寻找切换元素 h2 ->".hide" 的方法。

所有代码

 $(document).ready(function() { var $lectures = $('.beseda'), $filters = $("#filters input[type='checkbox']"), product_filter = new ListOfLecturesFilter($lectures, $filters); product_filter.init(); }); function ListOfLecturesFilter(lectures, filters) { var _this = this; this.init = function() { this.lectures = lectures; this.filters = filters; this.bindEvents(); }; /*remove checked boxes when click*/ this.bindEvents = function() { this.filters.click(this.filtrBeseda); $('#none').click(this.removeAllFilters); }; this.filtrBeseda = function() { _this.lectures.hide(); var filtredLectures = _this.lectures; var filterAttributes = $('.filter-attributes'); filterAttributes.each(function(){ var selectedFilters = $(this).find('input:checked'); if (selectedFilters.length) { var selectedFiltersValues = []; selectedFilters.each(function() { var currentFilter = $(this); selectedFiltersValues.push("[data-" + currentFilter.attr('name') + "='" + currentFilter.val() + "']"); }); filtredLectures = filtredLectures.filter(selectedFiltersValues.join(',')); } }); filtredLectures.show(); };}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id='filters' class='seznamBesed'> <br> <div class='filter-attributes'> <div class=" nazev-filtru pobocka">Pobočka</div> <label for='Vozovna'>Vozovna</label><input type='checkbox' name='pobocka' id='Vozovna' value='Vozovna' /> <label for='Kralikov'>Kralíkov</label><input type='checkbox' name='pobocka' id='Kralikov' value='Kralikov'/> </div> <br> <div class='filter-attributes'> <div class="nazev-filtru proKoho">Věková kategorie </div> <label for='ms' >Mateřská škola</label><input type='checkbox' name='proKoho' id='ms' value='ms'/> <label for='zs1' >První stupeň</label><input type='checkbox' name='proKoho' id='zs1' value='zs1'/> <label for='zs2' >Druhý stupeň</label><input type='checkbox' name='proKoho' id='zs2' value='zs2' /> </div> <br> <div class='filter-attributes'> <div class="nazev-filtru obor"> Témata</div> <div> <label for='knihy'>Knihy </label><input type='checkbox' name='obor' id='knihy' value='knihy'/> <label for='eko'>Ekologie</label><input type='checkbox' name='obor' id='eko' value='eko' /> <label for='media'>Mediální gramotnost</label><input type='checkbox' name='obor' id='media' value='media'/> </div> </div> <br> <div class="seznamBesed" id="seznamBesedId"> <h2> Vozovna </h2> <div class='beseda' data-pobocka='Vozovna' data-proKoho='zs1' data-obor='eko'> <div class="nazev">Filter Vozovna zs1 eko</div> </div> <div class='beseda' data-pobocka='Vozovna' data-proKoho='ms' data-obor='knihy'> <div class="nazev">Filter Vozovna ms knihy</div> </div> <h2> Kralíkov </h2> <div class='beseda' data-pobocka='Kralikov' data-proKoho='ms' data-obor='media'> <div class="nazev">Filter Kralikov ms media</div> </div> <div class='beseda' data-pobocka='Kralikov' data-proKoho='zs2' data-obor='knihy'> <div class="nazev">Filter Kralikov zs2 knihy</div> </div> </div>