【问题标题】:Hide empty <li>隐藏空<li>
【发布时间】:2013-03-16 13:55:27
【问题描述】:

如果&lt;li&gt; 为空或者&lt;li&gt; 中有空格,我想隐藏所有&lt;li&gt;

我是这样做的:

$("li:empty").filter(function(i,v){return $.trim($(v).text()).length == 0;}).css('display', 'none');

这是错误的语法吗?

如果我创建一个类以使空的&lt;li&gt; 不可见,它可以正常工作。像这样:

$("li[class='hideLi']").filter(function(i,v){return $.trim($(v).text()).length == 0;}).css('display', 'none');

但我不知道哪个&lt;li&gt; 会是空的。

谁能帮帮我。 如果&lt;li&gt; 为空,我想做display=none

这是我的代码:-

<script src="http://code.jquery.com/jquery-latest.js"></script>




<script>
  $(document).ready(function(){
    $("td:empty").css('display', 'none');
     $("div:empty").css('display', 'none');
     $(!$.trim('li:empty')).hide();
     $("li[class='hideLi']").filter(function(i,v){return $.trim($(v).text()).length == 0;}).css('display', 'none');
  });
  </script>

<ul>
  <li style="border:red solid 1px ">HI</li>
  <li style="border:green solid 1px ">  </li>
    <li style="border:blue solid 1px " class="hideLi">  </li>
  </ul>

谢谢,

【问题讨论】:

  • :empty 选择器将只选择那些没有任何内容的节点——甚至没有空格——在其中。那就是问题所在。 $('li:empty')过滤那些li 中包含空间的节点。所以后面的过滤器是没用的。试试@Vassilis 的答案。

标签: jquery html html-lists hide trim


【解决方案1】:

您可以使用.hide()

如果您有空格,可以使用jQuery.trim()

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

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

工作示例:fiddle example

【讨论】:

  • $(!$.trim("li:empty")).hide() 等价于$(!"li:empty").hide() ==> $(false).hide(),那么有什么意义呢?
  • 我已经更新了我的答案并使用&lt;li&gt;添加了一个工作小提琴
【解决方案2】:
$('li').filter(function(){
    return $.trim($(this).html()) == '';
}).hide()

【讨论】:

  • 如果我有这个怎么办:&lt;li&gt;&lt;a&gt;&lt;/a&gt;&lt;/li&gt;。如果锚文本为空,则隐藏LI。更新:解决了。谢谢! +1
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-07-15
相关资源
最近更新 更多