コンテンツが空の場合divを非表示にする

Question

哲学バブルは、共有ポイントコントロールを内部に持つ見積り/吹き出しの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です。

代替

また、すべてのdivの空と非表示を見つけるためにfilter()機能を使用することができます。

//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() 

..etcを。

注：:emptyセレクタがより効率的になります。 See jsPerf。以下のような

Answer 2

var myDiv = $('#myDiv'); 

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

Answer 3

何か：

良く使ってhttp://jsfiddle.net/IrvinDominin/XYr9T/1/

EDIT：ここ

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

はフィドルある

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

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