隐藏基于曾孙javascript的Div

时间:2019-02-08 14:23:57

标签: javascript html

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

3 个答案:

答案 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");