如果內容爲空，請隱藏div

Question

哲學泡泡就像一個內部具有sharepoint控件的報價/語音泡沫div風格，richHtmlField允許用戶在編輯頁面時鍵入內容，但如果用戶選擇將其留空，div中將沒有內容，所以只有泡泡會出現在頁面中，看起來很有趣，所以我想在沒有用戶輸入或基本上div是空的時候隱藏整個div？你如何在jQuery中做到這一點？

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

Answer 1

使用jQuery的:empty選擇：

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

這裏的a working 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選擇器將更高性能。 See jsPerf。

Answer 2

var myDiv = $('#myDiv'); 

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

Answer 3

喜歡的東西：

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

這裏是一個小提琴：http://jsfiddle.net/IrvinDominin/XYr9T/1/

編輯使用

更好：

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

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