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() {{1 } :visible li的元素。

<强>更新
现在它有效。遗憾。

Answer 2

~~HTML中没有lh个元素。参考文献：HTML5，HTML4.01，HTML 3.2。~~ （您已从问题中删除了lh。）

相反，请根据您认为合适的方式使用li类型（或者如果您定位的是近期足够的浏览量，则不需要任何类别;只需设置样式li:nth-child(1)或li:first-child ），并且不要隐藏li（这将使ul可见）：

<ul>
<li class='header'>Header</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

更新：我可能误会了。如果您想要隐藏标题，但以某种方式保持ul可见：

没有可见ul元素的li通常是不可见的，因为它没有任何尺寸。您可以使用CSS覆盖它，将ul样式设置为具有特定大小（live example）：

CSS：

ul.foo {
  width: 5em;
  height: 5em;
  background-color: #eee;
  border: 1px solid #aaa;
}

HTML：

<p><code>ul</code> with no visible children:</p>
<ul class='foo'>
  <li style="display: none">This is hidden</li>
</ul>
<p><code>ul</code> with a visible child:</p>
<ul class='foo'>
  <li>Visible child, note that it wraps</li>
</ul>

当然，你可以通过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...*/});
}

...或者更好的是，添加/删除一个类。

Answer 3

您可以使用: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();

     });
});

工作示例：http://jsfiddle.net/LDG4J/4/

Answer 4

试试这个：

$("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();
}

仅显示非空集合的标头

4 个答案: