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

jQuery一次加载10个项目

1 个答案: