javascript - jQuery 一次加载 10 个项目

Question

我需要一次显示 10 个 Song 对象，并在底部有一个加载更多按钮来加载 10 个以上结果。这种情况会持续发生，直到没有更多结果可用，并且此时不会显示“加载更多”按钮。

这就是我的想法

$(document).ready(function () {
    $('#song_list div:lt(10)').show();
    //var items =  ?
    //var shown =  ?
    $('#loadMore').click(function () {
        shown = $('#song_list div:visible').size()+10;
        if(shown<items) {$('#song_list div:lt('+shown+')').show();}
        else {$('#myList li: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>

Answer 1

关闭段落... "</p>"

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

试试这个:http://jsfiddle.net/gebm4/2/

var max_items_page = 2;

$('#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 {
        $('#myList li:lt('+items+')').show();
        $('#loadMore').hide();
    }
});