CODEWITHSUNDEEP
javascriptphpjquerywordpress
shutupchigo
shutupchigo

Reputation: 709

Hide only parent class of the child in loop

I've this loop in WordPress that displays post. 

<div class="parent-div" id="unuqueIdHereForEachBlock">
 <div class="child-1"></div>
 <div class="child-2">
    <div class="sub-child">

    </div>
 </div>
</div>

This 'parent-div' is in loop and it repeats 20-30 times for each post. For some of the posts, sub-child div would have no content, and in that case I want to hide 'child-1' div just for that particular post.

Solution in jQuery, JavaScript or PHP is fine.

Hope that makes sense.

Thanks.

Upvotes: 0

Views: 85

Answers (2)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this with jQuery, where you can iterate over each parent div and check for text. if text length is zero then hide child div

$(function(){
  $(".parent-div").each(function(){
    var text = $(this).find(".child-2 > .sub-child").text();
     if(text.length==0) {
        $(this).find(".child-1").hide();
      }
  });
});

Upvotes: 0

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28475

You can try following

$(".parent-div").each((i,e) => {
if(!$(e).find(".child-2 .sub-child").text().trim()) $(e).find(".child-1").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent-div" id="unuqueIdHereForEachBlock">
 <div class="child-1">Text 1</div>
 <div class="child-2">
    <div class="sub-child">

    </div>
 </div>
</div>
<div class="parent-div" id="unuqueIdHereForEachBlock">
 <div class="child-1">Text 2</div>
 <div class="child-2">
    <div class="sub-child">
        Some text
    </div>
 </div>
</div>

Upvotes: 1

Related Questions