本文介绍如何使用 jQuery 检测指定父容器（如 .div1）中当前可见的子 div 是否包含 元素，并据此动态控制另一元素（如 .div2）的显隐状态，适用于响应式内容展示与条件渲染场景。
本文介绍如何使用 jquery 检测指定父容器（如 `.div1`）中当前可见的子 `div` 是否包含 `` 元素，并据此动态控制另一元素（如 `.div2`）的显隐状态，适用于响应式内容展示与条件渲染场景。
在实际前端开发中，常需根据 DOM 结构的动态状态（如可见内容类型）来控制其他元素的显示逻辑。例如：当 .div1 中唯一可见的子元素不含 时，隐藏 .div2；反之，若任一可见子元素内存在图片，则显示 .div2。
核心思路是：遍历 .div1 的直接子 div 元素 → 过滤出 display: block（即视觉可见）的元素 → 检查其内部是否存在 标签 → 只要存在一个可见且含图片的子元素，就显示 .div2；否则统一隐藏。
以下是完整、健壮的实现方案：
$(document).ready(function() {
const $div1 = $('.div1');
const $div2 = $('.div2');
// 检查 .div1 中是否有「可见且含 img」的直接子 div
const hasVisibleImage = $div1.children('div').filter(function() {
return $(this).is(':visible') && $(this).find('img').length > 0;
}).length > 0;
// 统一控制 .div2 显隐
$div2.toggle(hasVisibleImage);
});
✅ 关键说明：
- 使用 .children('div') 精确限定为直接子 div，避免误匹配嵌套结构；
- :visible 伪类准确判断 CSS display、visibility 和尺寸等综合可见性（注意：visibility: hidden 或 opacity: 0 不影响 :visible 判断）；
- .toggle(boolean) 比重复调用 .show()/.hide() 更简洁安全；
- 推荐将该逻辑封装为函数，在 DOM 更新后（如 AJAX 加载、动态切换 class）主动重新执行，以支持后续状态变化。
⚠️ 注意事项：
- 原始代码中 if ($(".div1:not(img)").length) 语法错误：:not() 是伪类选择器，不能用于匹配“父容器不含 img”的语义，且 $(".div1:not(img)") 实际查找的是 class 为 div1 且不是 img 标签 的元素，与需求完全不符；
- 若 .div1 子元素通过 visibility: hidden 或 opacity: 0 隐藏而非 display: none，$(...).is(':visible') 仍会返回 true，此时需结合 getComputedStyle 进一步判断，但多数场景推荐统一使用 display 控制可见性以保证逻辑一致性。
此方案兼容主流浏览器，依赖 jQuery 3.x+，可无缝集成于现有项目中。
