jquery - 当所有列表项都隐藏时隐藏整个列表

Question

我有一个带导航的照片库。当您在导航中选择“照片”时，它会隐藏视频。当您单击“视频”时，它会隐藏照片。

在某些情况下，没有视频，我希望自动隐藏这些空行。

唯一的问题是，我不确定如何仅定位空行。

这是我的 HTML，其中一行没有视频:

<div id="right">
    <ul>
        <li id="gallery-all">All</li>
        <li id="gallery-photos">Photos</li>
        <li id="gallery-videos">Videos</li>
        <div class="clear"></div>
    </ul>
</div>
<div class="gallery-content" id="2012_national">
    <ul class="row">
        <li class="gallery-photo">
            <a class="group" title="" rel="" href="images/IMG_0672.jpg"><img src="files/photo.jpg" alt="" /></a>
            <p>Caption goes here</p>
        </li>
        <li class="gallery-photo">
            <a class="group" title="" rel="" href="images/IMG_1474.jpg"><img src="files/video.jpg" alt="" /></a>
            <p>Caption goes here</p>
        </li>
        <li class="gallery-photo">
            <a class="group" title="" rel="" href="images/IMG_1724.jpg"><img src="files/photo.jpg" alt="" /></a>
            <p>Caption goes here</p>
        </li>
        <li class="gallery-photo">
            <a class="group" title="" rel="" href="images/IMG_1725.jpg"><img src="files/video.jpg" alt="" /></a>
            <p>Caption goes here</p>
        </li>
        <div class="clear"></div>
    </ul>
</div>

这是到目前为止我的 jQuery:

//Hide empty rows
if($('.row').children(':visible').length == 0) {
    $('.row').hide();
};

有什么想法吗？

Answer 1

您可以通过简单地检查用于设置列表本身显示的匿名函数中可见子列表项的长度来隐藏/显示所有 .row 列表:

$(".row").css("display", function(){
  return $("li:visible", this).length ? "block" : "none" ;
});