如果子容器设置为不显示，则隐藏父容器

Question

不确定我在这里遗漏了什么，但是如果其中的锚链接设置为内联显示，则尝试隐藏链接parent-container的整个容器display: none

我试过用[...document.querySelectorAll(".parent-container a")].map(item => item.style.display == "none" && document.querySelectorAll(".parent-container").style = "display: none")

但无法让它正确检查。

 const parentContainer = document.querySelector(".parent-container [data-filter]"); const toggleViews = function(filterName) { parentContainer.forEach($el => { if ($el.dataset.filter == filterName || filterName == 'show-all') { $el.style.display = "initial"; } else { $el.style.cssText = "display:none;important"; } }); };

 section { border: 1px solid #000; }

 <section class="parent-container"> <div> <div class=""> <header> <h3>heading</h3> </header> <div class="col-w1"> <a href="#" class="" style="display: none;" data-filter="car"> <div class="col-item"> <img src="#" alt="">Test </div> </a> <a href="#" class="" style="display: none;" data-filter="boat"> <div class="col-item"> <img src="#" alt="">Test </div> </a> <a href="#" class="" style="display: none;" data-filter="house"> <div class="col-item"> <img src="#" alt="">Test </div> </a> </div> </div> </div> </section> <section class="parent-container"> <div> <div class=""> <header> <h3>heading</h3> </header> <div class="col-w1"> <a href="#" class="" style="display: block;" data-filter="house"> <div class="col-item"> <img src="#" alt="">Test </div> </a> <a href="#" class="" style="display: block;" data-filter="car"> <div class="col-item"> <img src="#" alt="">Test </div> </a> <a href="#" class="" style="display: block;" data-filter="boat"> <div class="col-item"> <img src="#" alt="">Test </div> </a> </div> </div> </div> </section>

Answer 1

您需要一个嵌套循环，外部循环遍历每个parent-container ，内部循环遍历a元素，这里使用NodeList.forEach进行外部循环，使用Array.every遍历从每个container查询a元素（在本例中使用getElementsByTagName ） .

 document.querySelectorAll(".parent-container").forEach(container => { const aElements = [...container.getElementsByTagName("a")]; if (aElements.every(element => element.style.display === "none")) { container.style.display = 'none' } else { container.style.display = 'block' } });

 section{ border: 1px solid #000; }

 <section class="parent-container"><div><div class=""><header><h3>heading</h3></header><div class="col-w1"><a href="#" class="" style="display: none;"><div class="col-item"><img src="#" alt="">Test</div></a><a href="#" class="" style="display: none;"><div class="col-item"><img src="#" alt="">Test</div></a><a href="#" class="" style="display: none;"><div class="col-item"><img src="#" alt="">Test</div></a></div></div></div></section><section class="parent-container"><div><div class=""><header><h3>heading</h3></header><div class="col-w1"><a href="#" class="" style="display: block;"><div class="col-item"><img src="#" alt="">Test</div></a><a href="#" class="" style="display: block;"><div class="col-item"><img src="#" alt="">Test</div></a><a href="#" class="" style="display: block;"><div class="col-item"><img src="#" alt="">Test</div></a></div></div></div></section>

编辑

为了响应您更完整的代码片段，这里有一个扩展示例。 您仍然没有解决实现所需内容所需的多个级别（正如@danh 在评论中指出的那样）。 您需要处理每个parent-container ，然后分别处理每个父容器的相关子容器。 下面的示例首先使用您的逻辑来过滤每个容器的子项，然后检查它们是否已全部隐藏。 我已经使用.hidden class 而不是内联 CSS 实现了它，但您可以根据需要进行调整。

 // query only the parent-containers const parentContainers = document.querySelectorAll(".parent-container"); function toggleViews(filterName) { for (const container of parentContainers) { // query relevant children const elements = [...container.querySelectorAll("[data-filter]")]; // hide filtered elements for (const element of elements) { if (element.dataset.filter === filterName || filterName === 'show-all') { element.classList.remove('hidden'); } else { element.classList.add('hidden'); } } // hide parent if all children are hidden if (elements.every(element => element.classList.contains('hidden'))) { container.classList.add('hidden'); } else { container.classList.remove('hidden'); } }; }; document.addEventListener('click', (e) => { if (e.target.nodeName === 'BUTTON'){ toggleViews(e.target.textContent.toLowerCase().replace(' ', '-')); } });

 section { border: 1px solid #000; }.hidden { display: none; }

 <button type="button" class="filter">Boat</button> <button type="button" class="filter">House</button> <button type="button" class="filter">Car</button> <button type="button" class="filter">Show all</button> <section class="parent-container"> <div> <div class=""> <header> <h3>Section 1</h3> </header> <div class="col-w1"> <a href="#" class="" data-filter="car"> <div class="col-item"> <img src="#" alt="">Car </div> </a> <a href="#" class="" data-filter="bicycle"> <div class="col-item"> <img src="#" alt="">Bicycle </div> </a> <a href="#" class="" data-filter="house"> <div class="col-item"> <img src="#" alt="">House </div> </a> </div> </div> </div> </section> <section class="parent-container"> <div> <div class=""> <header> <h3>Section 2</h3> </header> <div class="col-w1"> <a href="#" class="" data-filter="shed"> <div class="col-item"> <img src="#" alt="">Shed </div> </a> <a href="#" class="" data-filter="car"> <div class="col-item"> <img src="#" alt="">Car </div> </a> <a href="#" class="" data-filter="boat"> <div class="col-item"> <img src="#" alt="">Boat </div> </a> </div> </div> </div> </section>