使用display：none隱藏jQuery中的所有元素

我使用jQuery一次顯示10個元素。這裏是我的代碼使用display：none隱藏jQuery中的所有元素

var max_items_page = 10; 

    $('#song_list div:lt('+max_items_page+')').show(); 
    var shown = null; 
    var items = $("#song_list").find('div').length; 

    $('#loadMore').on('click',function(e){ 
     shown = $('#song_list div:visible').length+max_items_page; 
     if(shown<items) { 
      $('#song_list div:lt('+shown+')').show(); 
     } 
     else { 
       $('#song_list div:lt('+items+')').show(); 
       $('#loadMore').hide(); 
     } 
    });

這顯示歌曲列表

<div id='song_list'> 
    {% for song in dj_song_list %} 
    <div> 
     <p class="song"><h3>#{{ forloop.counter}} {{ song.name }}</h3></p> 
    </div> 
    {% endfor %} 
</div> 
<button id='loadMore'>Load more</button>

下面的代碼是CSS

#song_list div { 
    display:none; 
}

這顯示沒有結果，只是加載更多的按鈕。代碼有什麼問題？

來源

2013-12-20 Unknown Coder

顯示：沒有隱藏所有內容，所以您隱藏了#song_list中的所有項目。 – Cilan

如果我不使用它，我會得到所有的結果。 –

...但你選擇隱藏所有的東西... – Cilan

在您的代碼中，您隱藏了#song_list中的所有div標記。所以，如果你想隱藏除了第一個，只是這樣做：

#song_list div:not(div:first-child) { 
    display:none; 
}

或者你可以告訴你想用jQuery的：

#song_list div { 
     display:none; 
    }

的Javascript：

$('#song_list div').slice(1,10).show();

來源

2013-12-20 01:12:51 HICURIN

可能是錯誤的，但我認爲OP一次只需要10個，而不是1個。我還認爲他已將display：none設置爲所有DIV，以便jQuery可以顯示（）它們。 – TheCarver

好的。我不知道OP更新他的問題。現在我編輯了我的答案 – HICURIN

很好的使用'slice（）'。上投了反對票。 – TheCarver

-2

問題是不是關於CSS，你的顯示：首先沒有任何隱藏是合理的。

你能正確地確保

$('#song_list div:lt('+max_items_page+')').show();

運行？我的意思是這段代碼在div渲染後運行。

來源

2013-12-20 01:26:35 gee

這不是他的問題的答案。 –

使用display：none隱藏jQuery中的所有元素

回答

相關問題