隐藏空的 <li> 元素

Question

我希望隐藏所有空的<li>标签或者含有空格的<li>标签。

我是这样做的：

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

这是错误的语法吗？

如果我创建一个类来使空的<li>不可见，它可以很好地发挥作用。像这样：

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

但我不知道哪个<li>是空的。

有人能帮我吗？如果<li>为空，我想要执行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>

Thanks,

- Rohit Mehra

---

:empty选择器只会选取那些没有任何内容（甚至没有空格）的节点。这就是问题所在。$('li:empty')已经过滤掉了那些带有空格的li节点。因此，后面的筛选无用。请尝试@Vassilis的答案。 - Arie Xiao

Answer 1

您可以使用.hide()来实现隐藏。

如果您的内容中包含空格，您可以使用jQuery.trim()。

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

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

工作示例： fiddle示例

- 97ldave

---

$(!$.trim("li:empty")).hide() 相当于 $(!"li:empty").hide() ==> $(false).hide()，那有什么意义呢？ - Arie Xiao

我已经更新了我的答案，并添加了一个使用<li>的工作fiddle。 - 97ldave

Answer 2

$('li').filter(function(){
    return $.trim($(this).html()) == '';
}).hide()

- Vassilis

---

如果我有这个：<li><a></a></li>。如果锚文本为空，则隐藏LI。更新：已解决。谢谢！+1 - SearchForKnowledge