根据类与内容匹配性显示/隐藏DIV元素

你的核心需求是根据.search-result下的.Country子元素内容是否包含.Countries里的文本，来控制整个父元素的显示/隐藏，原代码的问题在于三层嵌套的forEach逻辑错误——每个.Country都会遍历所有.search-result，导致最终所有父元素的状态会被最后一次循环的结果覆盖，无法实现逐个判断的效果。

修正后的代码逻辑： #

1. 先获取目标关键词（也就是.Countries里的文本）
2. 遍历每一个.search-result元素
3. 在每个父元素内找到对应的.Country子元素
4. 判断子元素内容是否包含目标关键词，再控制父元素的显示状态

完整可运行代码： #

<html>
<head>
<style>
/* 可选优化：给默认状态加隐藏，避免页面加载时的闪烁 */
.search-result {
    display: none;
}
</style>
<script src="https://stacksnippets.net/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<div class="Countries">USA</div>
<div class="search-result">
    <div class="Country d-none">USA, Canada, Bolivia, Paraguay</div>
    <div>The body of the result</div>
</div>
<div class="search-result">
    <div class="Country d-none">USA, Canada, Bolivia, Paraguay</div>
    <div>The body of the result</div>
</div>
<div class="search-result">
    <div class="Country d-none">Canada, Bolivia, Paraguay</div>
    <div>The body of the result - you should not see this one</div>
</div>
<div class="search-result">
    <div class="Country d-none">USA, Canada, Bolivia, Paraguay</div>
    <div>The body of the result</div>
</div>
<div class="search-result">
    <div class="Country d-none">Canada, Bolivia, Paraguay</div>
    <div>The body of the result - you should not see this one</div>
</div>
<script type="text/javascript">
// 获取目标关键词，去除首尾空格避免干扰
const targetCountry = document.querySelector(".Countries").textContent.trim();

// 遍历每个search-result父元素
document.querySelectorAll(".search-result").forEach(result => {
    // 找到当前父元素下的Country子元素
    const countryElement = result.querySelector(".Country");
    // 判断内容是否包含目标关键词
    const hasTarget = countryElement.textContent.includes(targetCountry);
    // 控制父元素的显示状态
    result.style.display = hasTarget ? "block" : "none";
});
</script>
</body>
</html>

关键说明： #

• 去掉了冗余的多层循环，改为逐个处理每个父元素，确保每个.search-result的状态只由自己的.Country子元素决定
• 加入了trim()处理目标文本，避免空格导致的判断失误
• CSS里的默认隐藏设置是可选优化，能防止页面加载时不需要显示的元素短暂出现

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