[英]How can I hide a div when content is not displayed
I'm new to HTML and CSS. 我是HTML和CSS的新手。 Now I have a page with the below code:
现在,我有一个包含以下代码的页面:
With content displayed : 显示内容 :
<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>
The above code has two contents displayed. 上面的代码显示了两个内容。
Without content displayed : 没有显示内容:
<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>
Now, my problem is I want to hide if content is not present. 现在,我的问题是如果内容不存在,我想隐藏。 I don't want to display
<div id="row-3">
when not even one content is there . 当我什至没有任何内容时,我不想显示
<div id="row-3">
。 How can I do this? 我怎样才能做到这一点?
EDIT I did this , still not working 编辑我做到了,仍然无法正常工作
<div id="row-3" style="div:empty { display: none }">
add this javascript 添加此JavaScript
$(document).ready(function () {
var doHide = true;
$("#row-3 div").each(function () {
if ($(this).html() != '') {
doHide = false;
}
});
if ( doHide ) {
$("#row-3").hide();
}
});
Try this: 尝试这个:
$('div[id^=row-]').each(function () {
var content = false;
$(this).find('div').each(function () {
if (this.innerHTML != '') {
content = true
};
});
if (!content) {
this.style.display = 'none';
}
});
do css: 做CSS:
#row-3{
display: none;
}
You need to check the content length if it greater then zero display it else remove or hide it depned on your condition 您需要检查内容长度是否大于零(零),否则将其删除或隐藏(视情况而定)
var getLength = $("#row_new .groupz_column1").html().trim().length;
if (getLength == 0) {
// $("#row_new").remove(); // for remove
$("#row_new").hide(); // for hide
}
Considering the comment, add white-space: nowrap;
考虑评论,添加
white-space: nowrap;
to your css for class groupz_column1
.....it will remove the white space which are appearing in the empty div
到类
groupz_column1
.... groupz_column1
的CSS中,它将删除出现在空div
中的空白
Additionally, check this link, it has similar issue as yours : Remove "whitespace" between div element 此外,请检查此链接,它与您的问题类似: 删除div元素之间的“空白”
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.