Issue
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> <!-- I want to hide .div2 -->
CSS:
.div1 { }
.child1 { display: none }
.child2 { display: block }
.child3 { display: none }
.div2 { }
How to hide .div2
when what is left to display in .div1
is a text and not an img
?
Tried this but doesn't work:
if ($(".div1:not(img)").length) {
$(".div2").hide(); })
Solution
I hope this is what you are looking for
$('.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 -->
Answered By - Steve James
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.