用空跨度隐藏李

Question

我正在使用materialize css。我想要隐藏li标签内的所有空跨度。这是屏幕截图...我已经通过一些关于如何隐藏空李和div的帖子。这是结构

<ul id="select-options-c35dff64-99a4-b8cf-f4ed-079e4cffca0d" class="dropdown-content select-dropdown" style="width: 260px; position: absolute; top: 0px; left: 0px; display: none; opacity: 1;">
<li class=""><span> Select Parent Trade</span></li>
<li class=""><span> Civil &amp; Interior Works  </span></li>
<li class=""><span>   </span></li>
<li class=""><span>   </span></li>
<li class=""><span>   </span></li>
</ul> 

选择值时会自动填充类。我只想隐藏那些空的跨度。

我试过了

li span:empty {
    display: none;
}

$("li").each(function() {

    if(!$.trim($(this).html())) {
        $(this).hide();
    }
});

哪个不起作用。我尝试过定位select-dropdown课程。 任何建议或解决方案都将不胜感激。

Answer 1

您需要检查text而不是html

$("li").each(function() {
    if($(this).text().trim().length) {
        $(this).hide();
    }
});

如果除了span之外还有其他节点，请直接查看span

的文本

$("li").each(function() {
    if($(this).find( "span" ).text().trim().length) {
        $(this).hide();
    }
});

Answer 2

差不多......

修剪文本，然后检查其长度是否为零：

＆＃13;

＆＃13;

$(function() {
  $('li').each(function() {
    if( $.trim( $(this).find('span').text() ).length == 0 ) {
      $(this).hide();
      
      console.log( 'li number ' + ($(this).index()+1) + ' is hidden' );
    }
  });
});

＆＃13;

li { border: 1px solid blue; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="select-options-c35dff64-99a4-b8cf-f4ed-079e4cffca0d" class="dropdown-content select-dropdown" style="width: 260px; position: absolute; top: 0px; left: 0px;  opacity: 1;">
  <li class=""><span> Select Parent Trade</span></li>
  <li class=""><span> Civil &amp; Interior Works  </span></li>
  <li class=""><span>   </span></li>
  <li class=""><span>   </span></li>
  <li class=""><span>   </span></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 3

这不需要jquery或修剪......

var spans = document.querySelectorAll('span');

[].map.call(spans,function(n){
   !n.innerText && (n.parentElement.style.display = 'none');
})

// using ES6 can be even easier
for( n of [...spans] )
  !n.innerText && (n.parentElement.style.display = 'none');

li { border: 1px solid blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="select-options-c35dff64-99a4-b8cf-f4ed-079e4cffca0d" class="dropdown-content select-dropdown" style="width: 260px; position: absolute; top: 0px; left: 0px;  opacity: 1;">
  <li class=""><span> Select Parent Trade</span></li>
  <li class=""><span> Civil &amp; Interior Works  </span></li>
  <li class=""><span>   </span></li>
  <li class=""><span>   </span></li>
  <li class=""><span>   </span></li>
</ul>

Answer 4

您可以在条件中使用 :empty selector ：

$("li").each(function() {
  if ($(this).find("span:empty").length > 0) {
    $(this).hide();
  }
});

<强>演示：

$("li").each(function() {
  if ($(this).find("span:empty").length > 0) {
    $(this).hide();
  }
});

li {
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="select-options-c35dff64-99a4-b8cf-f4ed-079e4cffca0d" class="dropdown-content select-dropdown" style="width: 260px; position: absolute; top: 0px; left: 0px;  opacity: 1;">
  <li class=""><span> Select Parent Trade</span></li>
  <li class=""><span> Civil &amp; Interior Works  </span></li>
  <li class=""><span></span></li>
  <li class=""><span></span></li>
  <li class=""><span></span></li>
</ul>

注意：

请注意，span元素中的空格应该被修剪，否则span:empty将与范围不匹配。

Answer 5

＆＃13;

＆＃13;

$("li").each(function(index,key) {
  if($(this).find('span').text() == ""){
    $(key).hide();
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="select-options-c35dff64-99a4-b8cf-f4ed-079e4cffca0d" class="dropdown-content select-dropdown" style="width: 260px; position: absolute; top: 0px; left: 0px; opacity: 1;">
<li class=""><span> Select Parent Trade</span></li>
<li class=""><span> Civil &amp; Interior Works  </span></li>
<li class=""><span></span></li>
<li class=""><span></span></li>
<li class=""><span></span></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 6

我有这种情况，我需要能够显示：无; -webkit-FLEX：无;在包含空标签的li上，如本例所示。

<ul class="social-menu">
 <li><a href="https://www.facebook.com"><i class="fa fa-facebook"></i></a></li>
 <li><a></a></li>
 <li><a href="https://plus.google.com/"><i class="fa fa-google-plus"></i></a></li>
</ul>

我不确定我看到了一个我认为的解决方案，但这似乎是这里最相关的帖子。关于这个例子的任何其他想法。