Javascript 仅显示非空集合的标题

我有几个类似的列表：

<ul>
<li class="list-header">Header</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

标题
项目1
项目2
项目3

根据一些规则，我隐藏和显示

项，因此有时列表中有可见的
，有时除了带有
列表头的
类之外，它根本没有可见的
元素，所以
仍然存在。如果标题下没有可见元素，我想隐藏该标题。尽管我希望
仍然可见。
我该怎么做？
HTML中没有
lh
元素。参考文献：。（您已从问题中删除
lh
。）

相反，使用
li
和您认为合适的类（或者如果您针对最近足够多的浏览，则不需要类；只需设置
li:nth child（1）
或
li:first child
），并且不要隐藏
li
（这将保持
ul
可见）：

HTML:

当然，您可以通过jQuery而不是使用静态CSS规则来应用它：

$("ul.foo").css({
  width: "5em",
  height: "5em",
  backgroundColor: "#eee",
  border: "1px solid #aaa"
});

…因此，当您隐藏所有的
ul
元素时，可以这样做，当显示至少一个元素时，可以撤消它。更改后：

var ul = $(/*...selector for the relevant list...*/);
if (ul.find('li:visible')[0]) {
    // There's at least one visible `li` child
    ul.css({/*...styles for when the list is not empty...*/});
}
else {
    // There are no visible `li` children
    ul.css({/*...styles for when the list is empty...*/});
}

…或者更好的方法是添加/删除类。
您可以做什么（）：

基本上，上面所做的是切换
.list header
（我将其包装在
.each（）
中以演示不同的列表），这取决于列表
.has（）
:visible
li
元素是否
：not（.list header）

更新

现在它起作用了。抱歉。
您可以使用
:visible
和
:not
选择器查看更改可见性时是否存在任何元素。此示例在单击图元时切换可见性，如果不存在图元，则隐藏标题：

$('li:not(".list-header")').click(function(){
    $(this).toggle(10,function(){
       var l = $(this).parent().children('li:visible:not(".list-header")').length  
       if (l>0) $(this).parent().children('li.list-header').show();
        else $(this).parent().children('li.list-header').hide();

     });
});

工作示例：
尝试以下操作：

$("ul li:not('.list-header')").each(function(index, val) {
    if ($(this).text() == '') {
        $(this).hide();
    }
});
if (! ($('ul').has("li:visible:not('.list-header')").length)) {
    $('li.list-header').hide();
}

HTML中没有
lh
元素。参考资料：，@T.J.这不是我第一次看到有人使用它，如果它不是这些规范的一部分，为什么人们还要继续使用它？这是他们混淆的其他规范的一部分吗？真的，它不再存在了。我相应地修改了代码。谢谢。如果ul不包含可见元素，那么该元素本身将不可见。浏览器只显示一个空白。@Keoki:我不知道，我从来没见过。这两个地方都没有。
var ul = $(/*...selector for the relevant list...*/);
if (ul.find('li:visible')[0]) {
    // There's at least one visible `li` child
    ul.css({/*...styles for when the list is not empty...*/});
}
else {
    // There are no visible `li` children
    ul.css({/*...styles for when the list is empty...*/});
}

$('ul').each(function() {
    $ul = $(this);
    $ul.find('.list-header').toggle($ul.has('li:not(.list-header):visible').length != 0);
});

$('li:not(".list-header")').click(function(){
    $(this).toggle(10,function(){
       var l = $(this).parent().children('li:visible:not(".list-header")').length  
       if (l>0) $(this).parent().children('li.list-header').show();
        else $(this).parent().children('li.list-header').hide();

     });
});

$("ul li:not('.list-header')").each(function(index, val) {
    if ($(this).text() == '') {
        $(this).hide();
    }
});
if (! ($('ul').has("li:visible:not('.list-header')").length)) {
    $('li.list-header').hide();
}