我正在根据其曾孙有空类来隐藏具有常见问题类别的Div。如果可能的话,我想使用一些JavaScript。我提供了一个HTML示例。
<div class="faq-cat">
<h3>Text</h3>
<div class="vend-list">
<div id="wpv-view-layout-275-TCPID281CTID23" class="js-wpv-view-layout">
<div class="empty">No items found</div>
</div>
</div>
</div>
答案 0 :(得分:0)
如果您使用的是JQuery,则
$(".faq-cat").find($(".vend-list")).find($(".js-wpv-view-layout")).find($(".empty")).length
如果长度为0,则元素不存在
答案 1 :(得分:0)
在回答之前,我希望您重新考虑是否确实需要/希望使用JavaScript来解决此问题。例如,如果用户禁用了JavaScript,会发生什么?在页面加载和JavaScript被触发时,用户可能会看到FOUC。
您是否正在使用框架?如果您可以控制模板的生成方式,则可能希望阻止呈现内容,而不是将其隐藏在前端,例如使用服务器端模板逻辑:
<%= Enum.any? @cats do %>
<div class="faq-cat">...</div>
<% end %>
(使用phoenix框架的示例)
如果在向用户提供模板之前对模板没有任何控制权,则可以尝试在JavaScript中进行以下操作:
var fagCat = document.querySelector(".faq-cat");
if (fagCat.querySelector(".empty")) {
fagCat.style.display = "none";
}
Below is a hidden empty faq-cat div:
<div class="faq-cat">
<h3>Text</h3>
<div class="vend-list">
<div id="wpv-view-layout-275-TCPID281CTID23" class="js-wpv-view-layout">
<div class="empty">No items found</div>
</div>
</div>
</div>
答案 2 :(得分:-1)
因此,您可以首先在页面上找到所有faq-cat
元素。然后,选择第一个(如果页面上只有一个,则工作,如果需要循环访问cats
NodeList,则可以选择)。然后,如果在该empty
元素内搜索了一个faq-cat
类的孩子,如果找到至少一个具有empty
类的元素,请隐藏faq-cat
。
const cats = document.getElementsByClassName('faq-cat')
const cat = cats[0];
const empties = cat.getElementsByClassName('empty')
if (empties.length) cat.classList.add("hidden");