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 に答える