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

Answer 2

// iterate over each child of row
$('.row').children().each( function()
{
    // checks the text of each li
    if ( $(this).text() == "" )
    {
        // hides the li
        $(this).hide();
    }
});

Answer 3

用于隐藏行：

jQuery('.gallery-content .row').each(function(i, row) {
    if(jQuery('li', row).length == 0) {
        jQuery(row).hide();
    }
});

如果您想将其隐藏在导航栏中，可以在以下代码后使用以下内容：

if(jQuery('.gallery-content .row:visible').length == 0) {
    jQuery('#right li#gallery-videos').hide();
} else {
    jQuery('#right li#gallery-videos').show();
}

隐藏所有列表项时隐藏整个列表

3 个答案: