如何用JavaScript/jQuery判断small-div为空时隐藏对应middle-div

问题描述 #

HTML结构示例：

<div id="big-div">
    <div class="middle-div">
        <div>Child:</div>
        <div class="small-div">1</div>
    </div>
    <div class="middle-div">
        <div>Child:</div>
        <div class="small-div">2</div>
    </div>
    <div class="middle-div">
        <div>Child:</div>
        <div class="small-div"></div>
    </div>
</div>

当前显示效果：

Child:
1

Child:
2

Child:

需求：仅当small-div包含内容时，才显示对应的middle-div，预期效果：

Child:
1

Child:
2

尝试过的错误方法及问题 #

方法一 #

代码：

const element = document.getElementById("big-div");
let middle = element.getElementsByClassName("middle-div");
let small = element.getElementsByClassName("small-div");

for (let m = 0; m < middle.length; m++) {
    for (let s = 0; s < small.length; s++) {
        if (small[s].innerHTML = "") {
            middle[m].style.display = "none";
        }
    }
}

执行后结果：

Child:
Child:
Child:

问题：

• 条件判断误用赋值运算符=，而非比较运算符==，直接清空了所有small-div的内容
• 嵌套循环逻辑错误：每个middle-div会检查所有small-div，只要存在空的small-div，所有middle-div都会被隐藏

方法二 #

代码：

var small = [...document.getElementsByClassName("small-div")];
var disappear = function () {
    if (small.innerHTML == "") {
        parent.small.display = "none";
    }
}
small.forEach(disappear);

无效果，且console.log(small.innerHTML)输出undefined。
问题：

• small是DOM元素数组，数组本身没有innerHTML属性，因此输出undefined
• parent.small写法错误，无法正确获取父元素；隐藏元素需通过style.display = "none"设置

正确实现方式 #

方式一：遍历每个middle-div，检查内部的small-div #

const middleDivs = document.querySelectorAll('.middle-div');
middleDivs.forEach(div => {
    const smallDiv = div.querySelector('.small-div');
    // 去除空白字符后判断是否为空，避免空格/换行符导致误判
    if (!smallDiv.textContent.trim()) {
        div.style.display = 'none';
    }
});

方式二：遍历small-div，控制其父元素middle-div #

const smallDivs = document.querySelectorAll('.small-div');
smallDivs.forEach(div => {
    if (!div.textContent.trim()) {
        // 通过closest方法找到最近的父级middle-div并隐藏
        div.closest('.middle-div').style.display = 'none';
    }
});

内容的提问来源于stack exchange，提问作者Nikatia