如何使用jQuery判断父元素.parent-div是否包含子元素.child-div

参考HTML结构：

<div class="parent-div">
    <div class="child-div">This is a child</div>
    <div class="child-div">This is a child</div>
    <div class="child-div">This is a child</div>
    
    <div class="notif-div">Notification Div</div>
</div>

jQuery实现代码 #

单父容器场景（页面仅一个parent-div）

// 存在child-div直接子元素时隐藏通知栏
if ($('.parent-div').children('.child-div').length > 0) {
  $('.parent-div .notif-div').hide();
}

多父容器通用场景

// 遍历每个parent-div单独判断，toggle方法接收布尔值控制显隐：true显示，false隐藏
$('.parent-div').each(function() {
  const $curParent = $(this);
  $curParent.find('.notif-div').toggle($curParent.children('.child-div').length === 0);
});

补充说明 #

• 若需要匹配所有后代层级的child-div（包含嵌套的孙子、重孙级元素），将代码中的children('.child-div')替换为find('.child-div')即可。
• 代码需要在jQuery库加载完成后执行。

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