如果父 div 没有显示子元素，则显示某个不同的子 div答案

【问题标题】：If parent div has no children showing then show a certain different child div如果父 div 没有显示子元素，则显示某个不同的子 div
【发布时间】：2017-10-12 10:32:16
【问题描述】：

如果没有孩子，我会看到有关隐藏父 div 的类似问题，但如果没有其他孩子在其中，我找不到如何在父 div 中显示不同的 div。

我有一个使用免费会议室更新的父 div：

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

如果有空闲房间，它会显示在板上（在父级中）。这是在 JS 中完成的，如下所示：

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

如果一个房间默认不是空闲的，它是隐藏的：

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

css 类是这样的：

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

当所有房间都被隐藏时，有一个空白板，我想在父级中显示一个不同的子 div，这样我就可以显示一些更有趣的东西，例如公司标志。

（我知道即使有房间显示，我也可以在父级上显示公司徽标，但我只想在没有空闲房间时显示）

我可以用什么来实现这一点？

【问题讨论】：

可以查看$('#parent .showroom').length，如果等于0则显示logo

标签： javascript jquery html css

【解决方案1】：

是的！

我想出了一个纯 CSS 解决方案，因为组合选择器很棒：

考虑以下设置：

.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>

现在神奇在于以下几行：

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

解释：

取一个占位符，它是不包含 .hidden 类的 .room 的兄弟。占位符默认是可见的，但如果它可以找到一个有 .room 没有 .hidden 的兄弟，它将退回到 display none。

请注意，这要求占位符 div 始终是其父级的最后一个子级。由于~ 选择器只检查下一个兄弟姐妹，而不是前一个。

【讨论】：

【解决方案2】：

我会这样做：

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

和

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

在allRoomStatusAreTaken() 中，您必须检查是否所有房间都被占用。我会使用Lodash 中的every 之类的函数：

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

【讨论】：

【解决方案3】：

您可以默认隐藏标志，如果房间被隐藏，请使用 js 更改display。示例：

$(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>

【讨论】：

【解决方案4】：

只需将带有“companyLogo”类的徽标 div 保留在父级中，并使用以下 CSS 即可。

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

如需更具体的答案，请提供 HTML 结构。

【讨论】：

【解决方案5】：

当父级空闲时，您必须使用 append 将任何您想要的内容添加到父级

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

【讨论】：

【解决方案6】：

您可以将徽标包装在某个 div 中（或其他任何东西，或者您可以向徽标图像添加一个类，实际上是任何东西），默认情况下它将具有一个“隐藏”类，它将隐藏它，然后您可以当你没有房间时也显示这个，比如：

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

```

【讨论】：