本文介绍使用 jQuery 检测指定父容器（如 .div1）中所有当前可见的子 div 是否至少包含一个 <img> 标签，并据此动态显示或隐藏目标元素（如 .div2），适用于响应式内容控制场景。
本文介绍使用 jquery 检测指定父容器（如 `.div1`）中所有**当前可见的子 `div`** 是否至少包含一个 `` 标签，并据此动态显示或隐藏目标元素（如 `.div2`），适用于响应式内容控制场景。
在实际前端开发中，我们常需根据 DOM 的动态可视状态做出条件判断——例如：当某个容器中“最终可见的内容不包含图片”时，隐藏关联的侧边栏、广告位或操作面板（如本例中的 .div2）。但注意：CSS 的 display 属性影响的是渲染状态，而非 DOM 结构，因此必须结合 JavaScript（推荐 jQuery）遍历并检查实际可见且含图片的子元素。
核心逻辑如下：
- 遍历 .div1 下所有直接子 div 元素；
- 筛选出当前 CSS 显示为 display: block（或非 none）的元素（即 :visible）；
- 对每个可见子元素，检查其内部是否存在 <img> 标签（$(this).find('img').length > 0）；
- 只要有一个可见子元素含图片，就显示 .div2；否则统一隐藏。
以下是完整可运行示例：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
<script src="/uploads/20260616/17815672996a308f43859c2.jpg"></script>
<style>
.child1 { display: none; }
.child2 { display: block; } /* 当前唯一可见的文本块 */
.child3 { display: none; }
</style>
<div class="div1">
<div class="child1">Some text (hidden)</div>
<div class="child2">Some text (visible)</div>
<div class="child3"><img src="#" alt="sample" /></div>
</div>
<div class="div2">This will be hidden — because no visible child contains an image</div>// 执行检测逻辑
$(function() {
let hasVisibleImage = false;
$('.div1 > div').each(function() {
if ($(this).is(':visible') && $(this).find('img').length > 0) {
hasVisibleImage = true;
return false; // 退出循环（类似 break）
}
});
if (hasVisibleImage) {
$('.div2').show();
} else {
$('.div2').hide();
}
});✅ 关键说明：
- :visible 伪类会准确识别 display: block、visibility: visible 且尺寸非零的元素，比手动读取 css('display') 更可靠；
- 使用 return false 提前终止 .each() 循环，提升性能；
- 此方案不依赖 img 是否加载完成（onload），仅检测 DOM 存在性；若需校验图片是否有效，应额外监听 img.naturalWidth > 0 或 error 事件；
- 原始错误写法 $(".div1:not(img)") 语法无效——:not() 不接受标签名作为参数来否定后代关系，且选择器无法表达“可见子元素中无图片”的复合语义。
该方法简洁、兼容性好（支持 IE9+），适合集成到初始化脚本或 DOM 更新后的重绘钩子中。
