html - 如何将按需 CSS 样式分配给某些 div 或类？

Question

我正在为使用来自特定数据库的内容的客户开发分类/广告页面。我即将获得我正在寻找的外观，但现在我遇到了问题。我不想要空框的 CSS 样式到可用空间。我只想要信息到达数据库后将出现的那些 CSS 样式，并准备好在分类/广告页面上显示。

有没有办法让 CSS 样式仅在内容存在时应用？

This is my test page.

请注意我是如何欺骗 CSS 样式的，所以空白框(空格)会显示一条文字:“将您的广告放在这里!”但我真的不希望那里有那些空白框。任何帮助将不胜感激!

提前致谢。

Answer 1

您需要做的就是使用 jQuery 找到其标题(例如)上没有内容的父 div。然后你可以将它的display属性设置为none。我创建了一个工作示例 ****HERE****

HTML:

 class="ad">
  <h2>This is an ad</h2>
  <p>this is the ad which has been added by the database</p>
</div>
<div class="ad">
  <h2></h2>
  <p></p>
</div>

CSS:

* {box-sizing: border-box;}
h2, p {margin:0; padding:0;}

.ad {
  display: block;
  float: left;
  height:300px;
  width:130px;
  background: #999;
  margin: 10px 20px;
  padding: 5px;
}

jQuery:

  $(".ad").each(function() {
     if ($(this).find("h2").text() == "") {
       $(this).css("display","none");
     };
  })