jquery .each() 循环继续加载更多按钮？

Question

我已经为我的数组制作了每个循环 jQuery，但我想在第一次启动时加载 6 个项目，然后当我单击“加载更多”按钮时，它将显示 7 到 13，依此类推。我最初使用 .slice() 完成了 6 个限制，但总是无法加载更多按钮，有人可以帮忙吗？

我的代码：

function loadName(){
  $.getJSON('/namedatabase.php', function(data) {

    $.each($(data).slice(0, 6),function(i,item){
          $(".nameData").append('<div>'+item.name+'</div>');
        });

  });

}

加载更多按钮

<button class="btn btn-primary" onclick="loadName();">Load more</button>

Answer 1

实现服务器端分页会更好

但是如果你想在客户端预加载所有数据，那么试试

function loadName() {
    var $el = $(".nameData"),
        names = $el.data('names'),
        start = $el.data('loadstart');

    if (names) {
        $.getJSON('/namedatabase.php', function (data) {
            $.each(data.slice(0, 6), function (i, item) {
                $el.append('<div>' + item.name + '</div>');
            });
            $el.data({
                names: data,
                start: 6
            });
        });
    } else {
        if (data.length < start) {
            $.each(data.slice(start, start + 6), function (i, item) {
                $el.append('<div>' + item.name + '</div>');
            });
            $el.data('loadstart', start + 6)
        }
    }
}

这是一个有效的 fiddle。

jquery .each() 循环继续加载更多按钮？

jquery .each() loop continue on load more button?

jquery

each

slice