Question

我正在根据其曾孙有空类来隐藏具有常见问题类别的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>

Answer 1

如果您使用的是JQuery，则

$(".faq-cat").find($(".vend-list")).find($(".js-wpv-view-layout")).find($(".empty")).length

如果长度为0，则元素不存在

Answer 2

在回答之前，我希望您重新考虑是否确实需要/希望使用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>

Answer 3

因此，您可以首先在页面上找到所有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");

隐藏基于曾孙javascript的Div

3 个答案: