如何根据父容器中可见子元素是否包含图片动态隐藏另一个元素-html教程-PHP中文网

本文介绍使用 jQuery 检测指定父容器（如 .div1）中所有当前可见的子 div 是否至少包含一个标签，并据此动态显示或隐藏目标元素（如 .div2），适用于响应式内容控制场景。

本文介绍使用 jquery 检测指定父容器（如 `.div1`）中所有**当前可见的子 `div`** 是否至少包含一个 `` 标签，并据此动态显示或隐藏目标元素（如 `.div2`），适用于响应式内容控制场景。

在实际前端开发中，我们常需根据 DOM 的动态可视状态做出条件判断——例如：当某个容器中“最终可见的内容不包含图片”时，隐藏关联的侧边栏、广告位或操作面板（如本例中的 .div2）。但注意：CSS 的 display 属性影响的是渲染状态，而非 DOM 结构，因此必须结合 JavaScript（推荐 jQuery）遍历并检查实际可见且含图片的子元素。

核心逻辑如下：

遍历 .div1 下所有直接子 div 元素；
筛选出当前 CSS 显示为 display: block（或非 none）的元素（即 :visible）；
对每个可见子元素，检查其内部是否存在标签（$(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">@@##@@</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 更新后的重绘钩子中。