如果内容为空，请隐藏div [英] Hide a div if content is empty

问题描述

哲学泡泡就像是一个内部具有共享点控制的引用/语音泡沫div，richHtmlField允许用户在编辑页面时键入内容，但如果用户选择将其留空，则不会有内容该div所以只有泡沫将出现在页面，这将看起来很有趣，所以我想隐藏整个div时没有用户输入或基本上div是空的？如何在jQuery中做到这一点？

 < div class =philosophy-bubble> 
< PublishingWebControls：RichHtmlField FieldName =carephilosophyrunat =server>< / PublishingWebControls：RichHtmlField> 
< / div> 
  

解决方案

使用jQuery的 ：empty 选择器：

  $（ '理念气泡：空。'）隐藏（）; 
  

以下是 a工作小提琴。

另类

您也可以使用 filter（） 函数查找所有空div并隐藏：

  //所有divs 
 $（'div'）。filter（function（）{
 return $。 trim（$（this）.text（））===''
}）。hide（）
 
 //带特定类的div 
 $（'。philosophy （）（$（$）}）。filter（function（）{
 return $ .trim（$（this）.text（））===''
}）。hide（）
 
 //带特定ID $ b $的div（'＃YourDivID'）。filter（function（）{
 return $ .trim（$（this）.text（））==='' 
））。hide（）
  

..等。

注意：：empty 选择器将更具性能。 查看jsPerf 。

Philosophy bubble is like a quote/speech bubble div styled which has a sharepoint control inside, the richHtmlField which lets users to type in content while editing page, but if the user chooses to leave it empty, there will be no content in the div so only the bubble will show up in the page which will look funny so i wanna hide the whole div when there is no user entry or basically the div is empty?? How do you do this in jquery?

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

解决方案

Use jQuery's :empty selector:

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

Here's a working fiddle.

Alternative

You could also use the filter() function to find all empty div's and hide:

//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.

Note: the :empty selector will be more performant. See jsPerf.

这篇关于如果内容为空，请隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！