Question

我是HTML和CSS的新手。现在我有一个包含以下代码的页面：
显示内容：

<div id="row-3" ><!-- Row 3 start here -->

   <div class="groupz_column1" style="margin-right:0px;"><a href="http://www.xyz.in/ads/test.jpg" title=""><h2>null</h2><img align="left" width="100px" height="70px" src="http://www.xyz.in/ads/test.jpg?id=225"><p>Sign off for limited time offer<p></a></div>
   <div class="groupz_column1" style="margin-right:0px;"><a href="http://www.xyz.in/ads/test.jpg" title=""><h2>Test</h2><img align="left" width="100px" height="70px" src="http://www.xyz.in/ads/test.jpg?id=194"><p>A wonderful opportunity <p></a></div>
   <div class="groupz_column1" ></div>
   <div class="groupz_column1" ></div>
   <div class="clear clearfix"></div>
</div>

上面的代码显示了两个内容 未显示内容：

<div id="row-3" ><!-- Row 3 start here -->
   <div class="groupz_column1" ></div>
   <div class="groupz_column1" ></div>
   <div class="groupz_column1" ></div>
   <div class="groupz_column1" ></div>
   <div class="clear clearfix"></div>
</div>

现在，我的问题是，如果内容不存在，我想隐藏。当甚至没有一个内容时，我不想显示<div id="row-3">。我怎么能这样做？

修改我做了这个，仍然没有工作

   <div id="row-3" style="div:empty { display: none }">

Answer 1

添加此javascript

$(document).ready(function () {
   var doHide = true;
   $("#row-3 div").each(function () {
      if ($(this).html() != '') {
          doHide = false;
      }
   });

   if ( doHide ) {
      $("#row-3").hide();
   }
});

Answer 2

试试这个：

$('div[id^=row-]').each(function () {
    var content = false;
    $(this).find('div').each(function () {
        if (this.innerHTML != '') {
            content = true
        };
    });
    if (!content) {
        this.style.display = 'none';
    }
});

Answer 3

做css：

 #row-3{
        display: none;
    }

Answer 4

如果内容长度大于零，则需要检查内容长度，否则删除或隐藏条件

 var getLength = $("#row_new .groupz_column1").html().trim().length;

    if (getLength == 0) {
        // $("#row_new").remove(); // for remove
        $("#row_new").hide(); // for hide
    }

<强> LIVE DEMO

Answer 5

考虑到评论，请将white-space: nowrap;添加到您的css类groupz_column1 .....它将删除出现在空div <<的空白区域BR />

此外，请检查此链接，它与您的问题类似：Remove "whitespace" between div element

如何在未显示内容时隐藏div

5 个答案: