如何检查innerHTML是否为空？

Question

我想在父元素（Section）上设置一个类，当第二个子Div的innerHTML为空时。

例如：（这个部分应该得到一个“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>

我可以帮您翻译这段与IT技术相关的内容。当我遍历所有“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");
    }

类名 "hide-section" 从未被设置。

我认为 JS 总是忽略它，因为存在非空的 singleDiv，或者我错了吗？

- Hauskamel

---

<div class="child-2"> </div>不是空的 - 它包含了换行符和空格... <div class="child-2"></div>是空的... 尝试使用 if (singleDiv.innerHTML.trim() == "") { - undefined

我假设你的条件是触发的，你可以使用console.log("Test");来查看它是否正确响应，虽然我假设它确实如此；这让我想到了你的singleDiv.closest("section")。你可以两次使用parentElement吗？ - undefined

根据您对 "empty"（如果它没有任何子 div，忽略文本）的定义和带有 [tag:jquery] 标签的情况，一个替代方案是使用 .children()，例如 if ($(singleDiv).children().length === 0) $(singleDiv).addClass("hide-section") - 这可能更有效率，但展示了这个概念。 - undefined

Answer 1

以下是 <div class="child-2"> 内容：

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

这里的字符串并不是一个空字符串...它是"\n "

你需要对innerHTML进行修剪（即去除字符串开头和结尾的空格，在本例中是全部空格）。

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

- Bravo