只隐藏那些为空或没有文本的跨度

Hide only those spans which are empty or have no text in them

本文关键字：文本 隐藏 那些      更新时间：2023-09-26

我只需要隐藏那些没有任何文本的跨度。

<div class="img-wrapper">
    <div class="showcase-caption" style="display: block; "> <span id="MainContent_ImageCaption_0">This has caption</span>
    </div>
    <div class="showcase-caption" style="display: block;">  <span id="MainContent_ImageCaption_1"></span>
    </div>
    <div class="showcase-caption" style="display: block;">  <span id="MainContent_ImageCaption_2">This has caption and show show</span>
    </div>
    <div class="showcase-caption" style="display: block;">  <span id="MainContent_ImageCaption_3"></span>
    </div>
</div>

http://fiddle.jshell.net/0mzpLrt3/

您可以对JavaScript（在fiddle中）进行轻微更改，以删除或隐藏空元素的父元素：

$(".img-wrapper span:empty").each( function () {
    $(this).parent().remove(); // or .hide() to hide
});

使用:empty伪类选择器：

span:empty {
    display: none; /* or visibility: hidden */
}

您可以使用类似的东西

$(".img-wrapper .showcase-caption span").each(function(){
      if ($(this).is(':empty')) 
          $(this).parent().hide()
});

我正在测试http://fiddle.jshell.net/0mzpLrt3/并且工作良好

Fiddle

Html:

<div class="img-wrapper">
    <div class="showcase-caption" > <span id="MainContent_ImageCaption_0">This has caption</span>
    </div>
    <div class="showcase-caption">  <span id="MainContent_ImageCaption_1"></span>
    </div>
    <div class="showcase-caption">  <span id="MainContent_ImageCaption_2">This has caption and show show</span>
    </div>
    <div class="showcase-caption" > <span id="MainContent_ImageCaption_3"></span>
    </div>
</div>

JS:

$(".img-wrapper span:empty").each( function () {
    $(this).parent().addClass("hide");
});
相关文章：