如何检查 innerHTML 是否为空？答案

【问题标题】：How can I check whether innerHTML is empty?如何检查 innerHTML 是否为空？
【发布时间】：2021-10-14 02:59:45
【问题描述】：

所以当第二个子 Div innerHTML 为空时，我试图在父元素（部分）上设置一个类。

例如：（这个Section应该得到一个“hide-section”类来隐藏它）

<section class="ef-area">
   <div class="child-1">
       <div class="child-2">
       </div>
   </div>
</section>

这个不应该隐藏，因为“child-2”不为空

<section class="ef-area">
   <div class="child-1">
      <div class="child-2">
         <div class="child-3">
            ...//What Ever
         </div>
      </div>
  </div>
</section>

我遍历了所有“ef-area”部分，但是当第二个孩子 (child-2) 为空时，如何仅将这些部分设置为 display = none。

我所做的是：

    let efAreaDivs = document.querySelectorAll(".ef-area > div > div");
  
    for (singleDiv of efAreaDivs) {
    
    if (singleDiv.innerHTML == "") {
      singleDiv.closest("section").classList.add("hide-section");
    }

“隐藏部分”类永远不会被设置。

我认为js总是忽略它，因为有singleDiv不是空的还是我错了？

【问题讨论】：

<div class="child-2"> </div> 不为空 - 它有一个换行符和空格...<div class="child-2"></div> 为空...尝试if (singleDiv.innerHTML.trim() == "") {
我假设你的条件正在触发，你可以 console.log("Test");看看它是否正确响应，我认为它确实如此；这将我引向您的 singleDiv.closest("section")。你可以做两次 parentElement 吗？
@Bravo 非常感谢！这对我有用！
另一种选择，取决于您对“空”的定义（如果它没有任何子 div，则忽略文本）并标记为jquery 是使用.children() 例如if ($(singleDiv).children() === 0) $(singleDiv).addClass("hide-section") - 这个可能更有效，但显示了这个概念。

标签： javascript jquery loops class

【解决方案1】：

下面<div class="child-2">的内容

<section class="ef-area">
   <div class="child-1">
       <div class="child-2">
       </div>
   </div>
</section>

是 NOT 一个空字符串...它是"\n "

你需要修剪 innerHTML（去掉字符串开头和结尾的空白，在这种情况下是所有内容）

if (singleDiv.innerHTML.trim() == "") {
   singleDiv.closest("section").classList.add("hide-section");
}

【讨论】：