如何在.div1显示内容为文本而非图片时隐藏.div2？

HTML代码 #

<div class="div1">
    <div class="child1">Some text</div>
    <div class="child2">Some text</div>
    <div class="child3"><img src="#" /></div>
</div>

<div class="div2">...</div> <!-- 我想要隐藏.div2 -->

CSS代码 #

.div1 {  }

.child1 { display: none }
.child2 { display: block }
.child3 { display: none }

.div2 {  }

需求 #

当.div1中当前处于显示状态的内容为文本而非img时，隐藏.div2。

尝试的无效代码 #

if ($(".div1:not(img)").length) { 
$(".div2").hide(); }) 

解决方案 #

你之前的代码逻辑有误：$(".div1:not(img)")是判断.div1元素本身不是img标签，但.div1本来就是容器div，这个条件永远成立，所以无法正确触发隐藏逻辑。

正确的思路是针对.div1下可见的子元素进行判断，检查这些可见元素中是否包含img标签：

方法一：检查可见子元素是否包含img #

// 获取.div1下可见的直接子元素
const visibleChild = $(".div1 > div:visible");
// 如果可见子元素里没有img，就隐藏.div2
if (!visibleChild.find("img").length) {
  $(".div2").hide();
}

方法二：直接筛选不含img的可见子元素 #

// 找到.div1下可见且不包含img的子元素，若存在则隐藏.div2
if ($(".div1 > div:visible:not(:has(img))").length) {
  $(".div2").hide();
}

这两种方法都能准确判断当前.div1显示的是文本内容，此时执行隐藏.div2的操作。

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