如果 div 标签内的 span 元素为空，则使用 jquery 隐藏元素答案

【问题标题】：Hide element if span element inside a div tag is empty using jquery如果 div 标签内的 span 元素为空，则使用 jquery 隐藏元素
【发布时间】：2014-06-19 14:42:12
【问题描述】：

如果div中的span元素没有文本，我想隐藏一个元素

以下是 HTML 示例

<div class="showcase-caption" style="display: block;">
 <span> If this span has no text then i need to change the display property of outer div to none</span>
</div>

JsFiddle link

我尝试使用 css 执行此操作，但没有按预期工作。所以我认为 jquery 可以更好地工作并处理旧浏览器。

在这种情况下，我需要更改由其他脚本自动生成的内联属性，以显示图片库的图片标题。

更新：谢谢你们的回复。我选择 'satpal' 解决方案，因为它很短并且给了我准确的结果。

【问题讨论】：

标签： jquery html css

【解决方案1】：

只需使用 :empty。你不需要 if 阻止。

$('.showcase-caption span:empty').parent().hide()

Demo

【讨论】：

【解决方案2】：

Updated Demo

使用 jQuery is() 和 :empty 伪选择器。

if( $('.showcase-caption span').is(':empty') ) {
    $('.showcase-caption').hide();
}

【讨论】：

由于填充，它仍然显示绿色条我想完全隐藏它
@sudharsan，在我的演示中，我在span click 上编写了hide() 代码。所以用this

【解决方案3】：

尝试使用.is() 和:empty 选择器来完成您的任务，

if($('.showcase-caption span').is(':empty')) {

DEMO

完整代码：

var cache = $('.showcase-caption');
if($('span', cache).is(':empty')) {
  cache.hide();
}

DEMO

或者你可以简单地使用:has()选择器编写，

$('.showcase-caption:has(span:empty)').hide();

DEMO

【讨论】：

【解决方案4】：

if($(".showcase-caption span").html().trim().length <= 0 ){
            $(".showcase-caption").hide();
}

【讨论】：

【解决方案5】：

试试这个。

$(function){
    if($('.showcase-caption span').is(':empty')){
        $('.showcase-caption').css("display" , "none");
    }

    }

【讨论】：