如果父div没有子项显示，则显示某个不同的子div

Question

I am seeing simlar questions about hiding parent divs if there is no child but can't find how to show a different div in the parent if no other child is in it.

I have a parent div that is updated with free meeting rooms:

.Parent{
    width: 100%;
    margin-top: 4px;
    overflow: auto;
}

if there is a free room it is display on the board (in the parent). This is done in JS like so:

$('#Parent').addClass("showRooms");    

If a room is not free by default it is hidden:

if(roomStatus == "Taken"){
    $('#Parent').addClass("hideRooms");    
}

The css classes are as so:

.showRooms{
    visibility: visible;
    background-color: green;
}
.hideRooms{
    visibility:hidden;
}

When all the rooms are hidden there is a blank board, I would like to show a different child div in the parent so I can show something more interesting eg the company logo.

(I am aware I could have the compnay logo on the parent even if there are rooms showing but I only want it to show if there are no rooms free)

What can I use to achieve this?

Answer 1

Yes!

I've came up with a pure CSS solution, because combining selectors is awesome:

Consider the following setup:

 .container { margin: 10px; border: 1px solid #000; } .room { width: 100px; height: 75px; background-color: #F00; } .hidden { display: none; } .placeholder { display: block; } .room:not(.hidden) ~ .placeholder { display: none; } 

 <div class="container"> <div class="room hidden"></div> <div class="room hidden"></div> <div class="room hidden"></div> <div class="room hidden"></div> <div class="placeholder">No rooms available!</div> </div> <div class="container"> <div class="room hidden"></div> <div class="room"></div> <div class="room"></div> <div class="room hidden"></div> <div class="placeholder">No rooms available!</div> </div> 

Now the magic lies in the following lines:

.room:not(.hidden) ~ .placeholder {
    display: none;
}

Explanation:

Take a placeholder, who is a sibling of a .room that does not contain the .hidden class. The placeholder is visible by default, but if it can find a sibling that has a .room without .hidden, it will fall back into display none.

Take note, this requires the placeholder div to always be the last child of it's parent. Since the ~ selector only checks for next siblings, not previous.

Answer 2

I would go something like :

if(allRoomStatusAreTaken()){
  $('#Parent').addClass("showLogo");
} else {
  $('#Parent').removeClass("showLogo");
}

And

.showLogo{
  visibility: visible;
  background-image: url(...);
}

In allRoomStatusAreTaken() you have to check if all rooms are taken. I would use a function like every from Lodash :

function allRoomStatusAreTaken() {
  return every(allRooms, room => room.status === "Taken");
}

Answer 3

You could hide the logo by default, and change the display using js if the rooms are hidden. Example:

 $(function() { var roomStatus = "Taken"; if (roomStatus == "Taken") { $('#Parent').addClass("hideRooms"); $('.logo').addClass('show'); } }) 

 .Parent { width: 100%; margin-top: 4px; overflow: auto; } .showRooms { visibility: visible; background-color: green; } .hideRooms { visibility: hidden; } .logo { display: none; width: 200px; height: 200px; background: red; } .logo.show { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="Parent"> <div class="logo"> </div> </div> 

Answer 4

Just Keep the Logo div with class 'companyLogo' inside parent and use the following CSS and will work.

.hideRooms .companyLogo{
visibility:visible;
}
.showRooms .companyLogo{
visibility:hidden;
}

For more specific answer please provide HTML structure.

Answer 5

When the parent is free you have to use append to add anything you want to the parent

if(roomStatus == "Taken"){
$('#Parent').addClass("hideRooms");    
$("#Parent").append("<span>somthing to show</span>");
}

Answer 6

You can have a logo wrapped in some div (or anything else, or you can add a class to the logo image, really anything), which will have a 'hidden' class by default which will hide it and then you can also show this whet you have no rooms, something like:

if(roomStatus == "Taken") {
    $('#Parent').addClass("hideRooms");
    $('.logo').addclass("visible");
    $('.logo').removeClass("hidden");
} else {
    $('#Parent').addClass("showRooms");
    $('.logo').removeClass("visible");
    $('.logo').addClass("hidden");
}

```