Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to add style to a parent div only if it's child div content is empty?

How can I add CSS style using Jquery, to a parent div only if the parent’s child div content is empty?

Example:

 <div class="parentDivClass">
    <div class="theContent">          
        <div class="subContent"></div>
    </div>
</div>
<div class="parentDivClass">
    <div class="theContent">          
        <div class="subContent">some text</div>
    </div>
</div>
<div class="parentDivClass">
    <div class="theContent">          
        <div class="subContent"></div>
    </div>
</div>

So if there is no text inside a subContent class, then I want to add padding-bottom: 20px to parentDivClass. If there is text inside subContent, then no CSS to be added on parentDivClass.

I approached it like this but for some reason it is not adding style to parentDivClass if subContent has no text:

if( $('.subContent').is(':empty') )
{
    $('.parentDivClass').css({'padding-bottom': '20px'});
}

Is my logic going wrong some where?

Tags:

2

Answers


  1. 0

    Your if condition is true if any .subContent div is empty. And the .css() call doesn’t only apply to the parent of the empty div, it’s done on all .parentDivClass elements.

    You need to relate the empty .subContent div to its containing .parentDivClass.

    $(".subContent:empty").closest(".parentDivClass").css({'padding-bottom': '20px'});
    .parentDivClass {
  background-color: yellow;
  border: solid black 1px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="parentDivClass">
    <div class="theContent">          
        <div class="subContent"></div>
    </div>
</div>

<div class="parentDivClass">
    <div class="theContent">          
        <div class="subContent">not empty</div>
    </div>
</div>

<div class="parentDivClass">
    <div class="theContent">          
        <div class="subContent"></div>
    </div>
</div>
    Login or Signup to reply.
  2. 0

    Don’t use JS if a thing is achievable with CSS.

    There’s :has css selector, check the browser compatibility though:

    https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility

    .parentDivClass {
  background-color: yellow;
  border: solid black 1px;
}

.parentDivClass:has(.subContent:empty){
  padding-bottom: 20px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="parentDivClass">
    <div class="theContent">          
        <div class="subContent"></div>
    </div>
</div>

<div class="parentDivClass">
    <div class="theContent">          
        <div class="subContent">not empty</div>
    </div>
</div>

<div class="parentDivClass">
    <div class="theContent">          
        <div class="subContent"></div>
    </div>
</div>

    But you can do that more simple – use min-height:

    .parentDivClass {
  background-color: yellow;
  border: solid black 1px;
}

.parentDivClass{
  min-height : 20px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="parentDivClass">
    <div class="theContent">          
        <div class="subContent"></div>
    </div>
</div>

<div class="parentDivClass">
    <div class="theContent">          
        <div class="subContent">not empty</div>
    </div>
</div>

<div class="parentDivClass">
    <div class="theContent">          
        <div class="subContent"></div>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search