javascript - 仅显示非空集合的标题

Question

我有几个这样的列表:

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

根据一些规则，我隐藏和显示 <li>项目，所以有时列表中有可见的 <li>有时它没有可见的<li>除了带有 list-header 的元素类，所以 <li class="list-header">还在那里。如果没有<li>，我想隐藏那个标题标题下的可见元素。虽然我想要 <ul>仍然可见。我该怎么做？

Answer 1

您可以做什么(demo):

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

基本上，上面所做的是切换 .list-header(我将它包装在 .each() 中以演示不同的列表)取决于关于列表 .has() :visible li 元素是否是 :not(.list-header) .

更新
现在可以了。对不起。