如果内容为空，则隐藏一个div

Question

哲学气泡就像一个引用/对话框div样式，其中有一个sharepoint控件，即让用户在编辑页面时键入内容的richHtmlField。但是，如果用户选择将其留空，则div中将没有内容，因此页面上只会显示气泡，看起来很滑稽，因此我想在没有用户条目或基本上div为空时隐藏整个div？ 如何在jquery中实现这一点？

<div class="philosophy-bubble">
<PublishingWebControls:RichHtmlField FieldName="carephilosophy" runat="server"></PublishingWebControls:RichHtmlField>
</div>  

- AJSwift

Answer 1

使用jQuery的:empty选择器：

$('.philosophy-bubble:empty').hide();

这里是一个可用的Fiddle示例。

另一种方法

你也可以使用filter()函数查找所有空的div并隐藏：

//All divs
$('div').filter(function() {
        return $.trim($(this).text()) === ''
}).hide()

//div's with a certain class
$('.philosophy-bubble').filter(function() {
        return $.trim($(this).text()) === ''
}).hide()

//div with a specific ID
$('#YourDivID').filter(function() {
        return $.trim($(this).text()) === ''
}).hide()

注意：:empty选择器的性能更高。请参见jsPerf。

- James Hill

---

我的DIV只有在缺少特定类别的另一个DIV时才为空：http://stackoverflow.com/questions/26845161/how-to-hide-a-div-if-content-are-missing。我如何将其应用于我的代码？谢谢。 - Si8

Answer 2

var myDiv =  $('#myDiv');

if (myDiv.text() == '')
{
    myDiv.hide();
}

- Seth

Answer 3

类似这样：

if ($('.philosophy-bubble').is(":empty")){
    $('.philosophy-bubble').hide();
}

这是一个 JSFiddle 示例：http://jsfiddle.net/IrvinDominin/XYr9T/1/

编辑

可以使用以下代码进行优化：

$('.philosophy-bubble:empty').hide()

http://jsfiddle.net/IrvinDominin/XYr9T/3/

- Irvin Dominin