2

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

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

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

这是我的 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();
};

有任何想法吗？

4

3 回答 3

2

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

$(".row").css("display", function(){
  return $("li:visible", this).length ? "block" : "none" ;
});
于 2012-05-16T01:45:13.493 回答
1 
// iterate over each child of row
$('.row').children().each( function()
{
    // checks the text of each li
    if ( $(this).text() == "" )
    {
        // hides the li
        $(this).hide();
    }
});
​
于 2012-05-16T01:21:53.883 回答
1

用于隐藏行：

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();
}
于 2012-05-16T01:38:14.017 回答