Question

我正在使用jQuery一次显示10个元素。这是我的代码

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

这不显示任何结果，只显示“加载更多”按钮。代码有什么问题？

Answer 1

在你的代码中，你隐藏了#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();

Answer 2

问题不在于css，你的显示：没有先隐藏所有内容是合理的。

你能确定吗

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

运行正常吗？我的意思是在渲染div之后会运行一段代码。

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

2 个答案: