jquery 如何隐藏(或'显示:无')一个div时,另一个div的子是留给显示不包含图像?

rlcwz9us  于 5个月前  发布在  jQuery
关注(0)|答案(2)|浏览(51)

超文本标记语言:

<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> <!-- I want to hide .div2 -->

字符串
CSS:

.div1 {  }

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

.div2 {  }


如何隐藏.div2当什么是剩下的显示在.div1是一个文本,而不是一个img
尝试了这个,但不工作:

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

a11xaf1n

a11xaf1n1#

我希望这是你正在寻找的

$('.div1 > div').each(function() {
  if ($(this).is(':visible') && $(this).find('img').length > 0) {
    $('.div2').show();
  } else {
    $('.div2').hide();
  }
})
.child1 { display: none }
.child2 { display: block }
.child3 { display: none }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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> <!-- I want to hide .div2 -->
6vl6ewon

6vl6ewon2#

另一个尝试用jQuery实现CSS可以做得更简单的例子。
你可以使用现代CSS选择器:has(selector)来完成这项工作:

.div1:not(:has(img)) ~ .div2 { display: none; }

字符串

相关问题