如何循环浏览一个对象，一次给我5个项目？

Question

我有一个包含虚拟数据的JavaScript对象：

var movies = [
    {
        "title": "New School",
        "description": "Donec a sodales lorem. Curabitur at nulla nec sem volutpat accumsan placerat nec elit. Ut bibendum dui vitae purus fringilla rhoncus. Praesent volutpat felis vitae felis ultricies rhoncus. Nulla maximus nibh vel enim ullamcorper aliquam. Nam efficitur est nibh, id mollis nisl ullamcorper et.",
        "picture": "img.png"
    }, 
    {
        "title": "Old skool",
        "description": "Aenean iaculis vehicula sollicitudin. Sed convallis, massa sit amet venenatis volutpat, arcu dolor volutpat neque, in lobortis arcu velit hendrerit ante. Quisque accumsan luctus enim eu aliquam. Quisque et dolor est.",
        "ImageLink": "img.png"
    },
]

我希望能够在嵌套对象中加载前5个项目，但是在对象中添加接下来的5个项目，接着是接下来的5个项目。

到目前为止，我有这个：

$(document).ready(function(){
   for(var i = 0; i < 5; i++) {
      var obj = courses[i];      
      $( "#demo" ).append("<h2>" + obj.title + "</h2>" );
      $( "#demo" ).append("<p>" + obj.description + "</p>" );
    } 
});

此功能输出对象中的前5项。

在这个函数中，我试图让这个按钮在对象中添加接下来的5个项目，然后在再次单击该按钮时添加下一个5项。但它只输出对象中的其余项目。

$( ".button" ).click(function() {
    for(var i = 5; i < courses.length; i++) {
      var obj = courses[i];      
      $( "#demo" ).append("<h2>" + obj.Title + "</h2>" );

      $( "#demo" ).append("<p>" + obj.ShortDescription + "</p>" );
    }
});

codepen是https://codepen.io/mrsalami/pen/ZJGZao

Answer 1

这不是一个很好的解决方案，但它应该让你开始。您需要某种计数器来跟踪已经显示的元素数量。

＆＃13;

＆＃13;

var courses = [
  {
    Title: "Crime Risk New",
    ShortDescription:
      "Donec a sodales lorem. Curabitur at nulla nec sem volutpat accumsan placerat nec elit. Ut bibendum dui vitae purus fringilla rhoncus. Praesent volutpat felis vitae felis ultricies rhoncus. Nulla maximus nibh vel enim ullamcorper aliquam. Nam efficitur est nibh, id mollis nisl ullamcorper et.",
    ImageLink: "image1.jpg"
  },
  {
    Title: "Alternative Ireland Mergers Statements Practice",
    ShortDescription:
      "Aenean iaculis vehicula sollicitudin. Sed convallis, massa sit amet venenatis volutpat, arcu dolor volutpat neque, in lobortis arcu velit hendrerit ante. Quisque accumsan luctus enim eu aliquam. Quisque et dolor est.",
    ImageLink: "image1.jpg"
  },
  {
    Title: "Security Leadership Social",
    ShortDescription:
      "Vivamus pellentesque semper arcu eu egestas. Fusce lacinia velit quam, a rhoncus turpis blandit sit amet. Vivamus eros mi, malesuada vitae facilisis at, tincidunt in urna. Morbi sodales at nulla ac commodo.",
    ImageLink: "image1.jpg"
  },
  {
    Title: "Results regulation Financial Governance and Within",
    ShortDescription:
      "In enim nunc, tempor a congue ut, interdum consequat tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.  Nulla luctus sodales nulla, at eleifend nibh fermentum eget.",
    ImageLink: "image1.jpg"
  },
  {
    Title: "UK Leadership Professional Instruments to",
    ShortDescription:
      "Ut a congue quam, eu hendrerit dolor.  Ut porta in nunc id porttitor. Pellentesque iaculis pretium vulputate. Aenean eu neque vestibulum, semper leo sed, porttitor sapien. Etiam in justo eu risus scelerisque ultricies. Nunc commodo est in scelerisque semper.",
    ImageLink: "image1.jpg"
  },
  {
    Title: "Workload Witness Data",
    ShortDescription: "Vestibulum maximus et arcu eget congue. Phasellus",
    ImageLink: "image1.jpg"
  },
  {
    Title: "Business Savings Control",
    ShortDescription: "Etiam elementum auctor tellus.",
    ImageLink: "image1.jpg"
  },
  {
    Title: "Donor Business Professionalism Positioning",
    ShortDescription:
      "Phasellus ultrices tellus at gravida tempor. Mauris in augue dolor. Pellentesque sit amet mauris vehicula, eleifend tellus eget, cursus lectus. Suspendisse sed convallis ex, non tristique tellus.",
    ImageLink: "image1.jpg"
  },
  {
    Title: "Performance Work Preventing Workload Mergers Data Strategy",
    ShortDescription:
      "Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ut ipsum ac sapien mollis ultrices vehicula magna sed augue feugiat, eget interdum dui feugiat. Integer erat augue, lacinia vel ex a, consectetur lacinia nulla.",
    ImageLink: "image1.jpg"
  },
  {
    Title: "Enterprise Compliance Introduction and",
    ShortDescription:
      "Nullam cursus, leo in cursus feugiat, leo urna mollis dui, eu pretium augue orci ut lorem.",
    ImageLink: "image1.jpg"
  },
  {
    Title: "Performance Combinations Continuous BPM Data Corporate",
    ShortDescription:
      "Donec ornare nisi nec viverra lacinia. Ut in pharetra est. Suspendisse vestibulum, nisi eget bibendum porta, urna erat fermentum mi, ac efficitur turpis nisi ut lacus.",
    ImageLink: "image1.jpg"
  },
  {
    Title: "and Building Spreadsheet International",
    ShortDescription:
      "Phasellus odio arcu, lobortis vel dui et, tincidunt tristique mi. Aenean et malesuada nibh.",
    ImageLink: "image1.jpg"
  },
  {
    Title: "Partnership Acquisitions Finance Teams for Gift Strategy",
    ShortDescription:
      "Donec et arcu a augue sollicitudin congue. Ut suscipit, dui at ultrices convallis, purus mauris dignissim lacus, a dignissim dui justo eu turpis. Proin eget orci porttitor, convallis nibh sit amet, posuere lacus. Nunc vestibulum at ante sit amet dignissim. Curabitur quis quam tortor.",
    ImageLink: "image1.jpg"
  },
  {
    Title: "for The Briefing Financial UK in",
    ShortDescription:
      "Donec volutpat justo maximus lorem volutpat, eget aliquam dolor cursus. Maecenas porta fermentum rhoncus. Aliquam porttitor enim iaculis congue dignissim. Aenean at ante a nisl mattis efficitur. Morbi vulputate a lorem nec condimentum.",
    ImageLink: "image1.jpg"
  },
  {
    Title: "Ideas Management Mapping Using Skills and",
    ShortDescription:
      "Aliquam sollicitudin, nunc vitae laoreet mattis, justo ante congue tortor, nec tempus tellus metus consequat enim. Ut eget urna euismod, luctus augue laoreet, rutrum dui.  Vivamus egestas eleifend arcu facilisis gravida.",
    ImageLink: "image1.jpg"
  },
  {
    Title: "Career Negotiating Managing Buying change? your Tax",
    ShortDescription:
      "Donec purus odio, bibendum in rutrum sit amet, tincidunt a justo.   Curabitur quis blandit elit. Cras blandit felis scelerisque luctus vulputate. Etiam purus mauris, mattis bibendum metus a, vehicula consequat enim.",
    ImageLink: "image1.jpg"
  },
  {
    Title: "Mergers and Assessing Accountants and Ethical the",
    ShortDescription:
      "Donec vel neque consequat, tincidunt risus quis, sodales erat. Donec imperdiet urna in sollicitudin auctor. Donec tristique dolor vel elit pulvinar imperdiet. Nulla id nisi feugiat, tempus neque quis, dignissim augue.",
    ImageLink: "image1.jpg"
  },
  {
    Title: "Solving Mergers Business",
    ShortDescription:
      "Donec maximus suscipit tellus. Sed dolor metus, lobortis in ultricies eget, tincidunt in erat. Curabitur faucibus hendrerit ex in eleifend. Maecenas ligula mauris, bibendum vitae nisl eget, mattis consequat mi.",
    ImageLink: "image1.jpg"
  },
  {
    Title: "Promoting for Basics Accounting",
    ShortDescription:
      "Morbi sit amet diam a dui molestie venenatis ac vitae tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. ",
    ImageLink: "image1.jpg"
  },
  {
    Title: "Building UK GAAP World",
    ShortDescription: "Nunc consequat dictum rutrum.",
    ImageLink: "image1.jpg"
  },
  {
    Title: "Principles New Professional Accountants",
    ShortDescription:
      "Mauris luctus neque sit amet odio posuere porta. Aliquam interdum augue dui, at lobortis eros ultrices id. Donec mattis posuere dui vitae sagittis. Sed tempor aliquam nisi, vel semper odio.",
    ImageLink: "image1.jpg"
  },
  {
    Title: "Transformation Charity Solving The Dynamic Guide",
    ShortDescription:
      "Duis leo lectus, lacinia sodales semper eget, convallis ut nibh. In blandit orci lectus, at imperdiet urna posuere nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc vel urna quis est varius auctor.",
    ImageLink: "image1.jpg"
  },
  {
    Title: "Megatrends and Advantage",
    ShortDescription: "Morbi consequat eu magna quis bibendum.",
    ImageLink: "image1.jpg"
  },
  {
    Title: "The Law Protection Control",
    ShortDescription:
      "Proin lobortis, ante ut vestibulum posuere, tortor mauris iaculis nulla, ac commodo odio quam eu arcu. Suspendisse at fringilla purus, vitae pharetra ante. Suspendisse mattis rhoncus gravida. Etiam tincidunt elementum condimentum. Vivamus id sagittis erat, tincidunt tristique elit.",
    ImageLink: "image1.jpg"
  },
  {
    Title: "Corporate Ethical",
    ShortDescription:
      "Vivamus et vulputate ipsum, id vulputate nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus lacus risus, egestas nec magna ornare, aliquam luctus nibh. Morbi vel ullamcorper ex.",
    ImageLink: "image1.jpg"
  },
  {
    Title: "Succession IFRS IFRS Cyber for Integrated and",
    ShortDescription:
      "Mauris molestie nunc ut efficitur tincidunt. Quisque consectetur tincidunt lorem, sit amet semper purus pellentesque non. Pellentesque et volutpat sapien.",
    ImageLink: "image1.jpg"
  },
  {
    Title: "for Reacting Understanding SME Results The",
    ShortDescription:
      "Praesent ac sagittis purus. Etiam lacinia massa sed felis pulvinar, vitae consectetur tellus iaculis. Nullam quis vulputate turpis.",
    ImageLink: "image1.jpg"
  },
  {
    Title: "Development with Accounting Issues and",
    ShortDescription:
      "Maecenas non pellentesque neque. Donec maximus bibendum lectus vel eleifend. Nullam fringilla vitae ex vel eleifend. Nunc aliquet tempus sapien vitae consequat. Donec pretium ipsum ut nunc ornare, a tincidunt odio bibendum.",
    ImageLink: "image1.jpg"
  },
  {
    Title: "Tips Financial Planning",
    ShortDescription:
      "Proin congue semper fringilla. Cras risus ipsum, scelerisque sit amet nunc in, aliquam volutpat neque. Maecenas imperdiet nunc sed libero congue, non fringilla sapien ultricies.",
    ImageLink: "image1.jpg"
  }
];

$(document).ready(function() {
  appendRows();
});
$(".button").click(function() {
  appendRows();
});
var k = 0;
function appendRows() {
  for (var i = 0; i < 5; i++) {
    if (courses[k] != null) {
      var obj = courses[k];
      $("#demo").append("<h2>" + obj.Title + "</h2>");
      $("#demo").append("<p>" + obj.ShortDescription + "</p>");
      k++;
    }
  }
}
console.log(courses.length);

＆＃13;

#demo > p{
  margin-bottom:100px;
}

.button {
    background-color: blue; 
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-weight:bold;
    font-size:16px;
    border-radius: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="demo"></p>
<a href="#!" class="button">Link Button</a>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在循环外部创建一个变量，以跟踪到目前为止检索到的项目，并在循环中使用该变量。

var items_retrieved = 0;

$(document).ready(function() {
  for (; items_retrieved < 5; items_retrieved++) {
    var obj = courses[items_retrieved];
    $("#demo").append("<h2>" + obj.Title + "</h2>");
    $("#demo").append("<p>" + obj.ShortDescription + "</p>");
  }
});

$(".button").click(function() {
  for (var i = items_retrieved; i < items_retrieved + 5; i++) {
    var obj = courses[i];
    $("#demo").append("<h2>" + obj.Title + "</h2>");

    $("#demo").append("<p>" + obj.ShortDescription + "</p>");
  }
  items_retrieved += 5;
});

Answer 3

我认为你可以这样使用。

$( ".button" ).click(function() {
    for(var i = 5 , j = 0 ; i > 0 ; i-- , j++) {
      var obj = courses[j];      
      $( "#demo" ).append("<h2>" + obj.Title + "</h2>" );

      $( "#demo" ).append("<p>" + obj.ShortDescription + "</p>" );
    }
});

Answer 4

使用一个本地变量i以确保您在5.

之内

使用全局变量j来跟踪您所处的位置。

var courses = [{
    "Title": "Crime Risk New",
    "ShortDescription": "Donec a sodales lorem. Curabitur at nulla nec sem volutpat accumsan placerat nec elit. Ut bibendum dui vitae purus fringilla rhoncus. Praesent volutpat felis vitae felis ultricies rhoncus. Nulla maximus nibh vel enim ullamcorper aliquam. Nam efficitur est nibh, id mollis nisl ullamcorper et.",
    "ImageLink": "image1.jpg"
  },
  {
    "Title": "Alternative Ireland Mergers Statements Practice",
    "ShortDescription": "Aenean iaculis vehicula sollicitudin. Sed convallis, massa sit amet venenatis volutpat, arcu dolor volutpat neque, in lobortis arcu velit hendrerit ante. Quisque accumsan luctus enim eu aliquam. Quisque et dolor est.",
    "ImageLink": "image1.jpg"
  },
  {
    "Title": "Security Leadership Social",
    "ShortDescription": "Vivamus pellentesque semper arcu eu egestas. Fusce lacinia velit quam, a rhoncus turpis blandit sit amet. Vivamus eros mi, malesuada vitae facilisis at, tincidunt in urna. Morbi sodales at nulla ac commodo.",
    "ImageLink": "image1.jpg"
  },
  {
    "Title": "Results regulation Financial Governance and Within",
    "ShortDescription": "In enim nunc, tempor a congue ut, interdum consequat tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.  Nulla luctus sodales nulla, at eleifend nibh fermentum eget.",
    "ImageLink": "image1.jpg"
  },
  {
    "Title": "UK Leadership Professional Instruments to",
    "ShortDescription": "Ut a congue quam, eu hendrerit dolor.  Ut porta in nunc id porttitor. Pellentesque iaculis pretium vulputate. Aenean eu neque vestibulum, semper leo sed, porttitor sapien. Etiam in justo eu risus scelerisque ultricies. Nunc commodo est in scelerisque semper.",
    "ImageLink": "image1.jpg"
  },
  {
    "Title": "Workload Witness Data",
    "ShortDescription": "Vestibulum maximus et arcu eget congue. Phasellus",
    "ImageLink": "image1.jpg"
  },
  {
    "Title": "Business Savings Control",
    "ShortDescription": "Etiam elementum auctor tellus.",
    "ImageLink": "image1.jpg"
  },
  {
    "Title": "Donor Business Professionalism Positioning",
    "ShortDescription": "Phasellus ultrices tellus at gravida tempor. Mauris in augue dolor. Pellentesque sit amet mauris vehicula, eleifend tellus eget, cursus lectus. Suspendisse sed convallis ex, non tristique tellus.",
    "ImageLink": "image1.jpg"
  },
  {
    "Title": "Performance Work Preventing Workload Mergers Data Strategy",
    "ShortDescription": "Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ut ipsum ac sapien mollis ultrices vehicula magna sed augue feugiat, eget interdum dui feugiat. Integer erat augue, lacinia vel ex a, consectetur lacinia nulla.",
    "ImageLink": "image1.jpg"
  },
  {
    "Title": "Enterprise Compliance Introduction and",
    "ShortDescription": "Nullam cursus, leo in cursus feugiat, leo urna mollis dui, eu pretium augue orci ut lorem.",
    "ImageLink": "image1.jpg"
  },
  {
    "Title": "Performance Combinations Continuous BPM Data Corporate",
    "ShortDescription": "Donec ornare nisi nec viverra lacinia. Ut in pharetra est. Suspendisse vestibulum, nisi eget bibendum porta, urna erat fermentum mi, ac efficitur turpis nisi ut lacus.",
    "ImageLink": "image1.jpg"
  },
  {
    "Title": "and Building Spreadsheet International",
    "ShortDescription": "Phasellus odio arcu, lobortis vel dui et, tincidunt tristique mi. Aenean et malesuada nibh.",
    "ImageLink": "image1.jpg"
  },
  {
    "Title": "Partnership Acquisitions Finance Teams for Gift Strategy",
    "ShortDescription": "Donec et arcu a augue sollicitudin congue. Ut suscipit, dui at ultrices convallis, purus mauris dignissim lacus, a dignissim dui justo eu turpis. Proin eget orci porttitor, convallis nibh sit amet, posuere lacus. Nunc vestibulum at ante sit amet dignissim. Curabitur quis quam tortor.",
    "ImageLink": "image1.jpg"
  },
  {
    "Title": "for The Briefing Financial UK in",
    "ShortDescription": "Donec volutpat justo maximus lorem volutpat, eget aliquam dolor cursus. Maecenas porta fermentum rhoncus. Aliquam porttitor enim iaculis congue dignissim. Aenean at ante a nisl mattis efficitur. Morbi vulputate a lorem nec condimentum.",
    "ImageLink": "image1.jpg"
  },
  {
    "Title": "Ideas Management Mapping Using Skills and",
    "ShortDescription": "Aliquam sollicitudin, nunc vitae laoreet mattis, justo ante congue tortor, nec tempus tellus metus consequat enim. Ut eget urna euismod, luctus augue laoreet, rutrum dui.  Vivamus egestas eleifend arcu facilisis gravida.",
    "ImageLink": "image1.jpg"
  },
  {
    "Title": "Career Negotiating Managing Buying change? your Tax",
    "ShortDescription": "Donec purus odio, bibendum in rutrum sit amet, tincidunt a justo.   Curabitur quis blandit elit. Cras blandit felis scelerisque luctus vulputate. Etiam purus mauris, mattis bibendum metus a, vehicula consequat enim.",
    "ImageLink": "image1.jpg"
  },
  {
    "Title": "Mergers and Assessing Accountants and Ethical the",
    "ShortDescription": "Donec vel neque consequat, tincidunt risus quis, sodales erat. Donec imperdiet urna in sollicitudin auctor. Donec tristique dolor vel elit pulvinar imperdiet. Nulla id nisi feugiat, tempus neque quis, dignissim augue.",
    "ImageLink": "image1.jpg"
  },
  {
    "Title": "Solving Mergers Business",
    "ShortDescription": "Donec maximus suscipit tellus. Sed dolor metus, lobortis in ultricies eget, tincidunt in erat. Curabitur faucibus hendrerit ex in eleifend. Maecenas ligula mauris, bibendum vitae nisl eget, mattis consequat mi.",
    "ImageLink": "image1.jpg"
  },
  {
    "Title": "Promoting for Basics Accounting",
    "ShortDescription": "Morbi sit amet diam a dui molestie venenatis ac vitae tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. ",
    "ImageLink": "image1.jpg"
  },
  {
    "Title": "Building UK GAAP World",
    "ShortDescription": "Nunc consequat dictum rutrum.",
    "ImageLink": "image1.jpg"
  },
  {
    "Title": "Principles New Professional Accountants",
    "ShortDescription": "Mauris luctus neque sit amet odio posuere porta. Aliquam interdum augue dui, at lobortis eros ultrices id. Donec mattis posuere dui vitae sagittis. Sed tempor aliquam nisi, vel semper odio.",
    "ImageLink": "image1.jpg"
  },
  {
    "Title": "Transformation Charity Solving The Dynamic Guide",
    "ShortDescription": "Duis leo lectus, lacinia sodales semper eget, convallis ut nibh. In blandit orci lectus, at imperdiet urna posuere nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc vel urna quis est varius auctor.",
    "ImageLink": "image1.jpg"
  },
  {
    "Title": "Megatrends and Advantage",
    "ShortDescription": "Morbi consequat eu magna quis bibendum.",
    "ImageLink": "image1.jpg"
  },
  {
    "Title": "The Law Protection Control",
    "ShortDescription": "Proin lobortis, ante ut vestibulum posuere, tortor mauris iaculis nulla, ac commodo odio quam eu arcu. Suspendisse at fringilla purus, vitae pharetra ante. Suspendisse mattis rhoncus gravida. Etiam tincidunt elementum condimentum. Vivamus id sagittis erat, tincidunt tristique elit.",
    "ImageLink": "image1.jpg"
  },
  {
    "Title": "Corporate Ethical",
    "ShortDescription": "Vivamus et vulputate ipsum, id vulputate nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus lacus risus, egestas nec magna ornare, aliquam luctus nibh. Morbi vel ullamcorper ex.",
    "ImageLink": "image1.jpg"
  },
  {
    "Title": "Succession IFRS IFRS Cyber for Integrated and",
    "ShortDescription": "Mauris molestie nunc ut efficitur tincidunt. Quisque consectetur tincidunt lorem, sit amet semper purus pellentesque non. Pellentesque et volutpat sapien.",
    "ImageLink": "image1.jpg"
  },
  {
    "Title": "for Reacting Understanding SME Results The",
    "ShortDescription": "Praesent ac sagittis purus. Etiam lacinia massa sed felis pulvinar, vitae consectetur tellus iaculis. Nullam quis vulputate turpis.",
    "ImageLink": "image1.jpg"
  },
  {
    "Title": "Development with Accounting Issues and",
    "ShortDescription": "Maecenas non pellentesque neque. Donec maximus bibendum lectus vel eleifend. Nullam fringilla vitae ex vel eleifend. Nunc aliquet tempus sapien vitae consequat. Donec pretium ipsum ut nunc ornare, a tincidunt odio bibendum.",
    "ImageLink": "image1.jpg"
  },
  {
    "Title": "Tips Financial Planning",
    "ShortDescription": "Proin congue semper fringilla. Cras risus ipsum, scelerisque sit amet nunc in, aliquam volutpat neque. Maecenas imperdiet nunc sed libero congue, non fringilla sapien ultricies.",
    "ImageLink": "image1.jpg"
  }
];

$(document).ready(function() {
  var j = 0;
  $('.button').click(function() {
    for (var i = 0; i < 5 && j < courses.length; i++, j++) {
      var obj = courses[j];
      $("#demo").append("<h2>" + (j + 1) + " " + obj.Title + "</h2><p>" + obj.ShortDescription + "</p>");
    }
    // trigger first set
  }).click();
});

.button {
  background-color: blue;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-weight: bold;
  font-size: 16px;
  border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p id="demo"></p>
<a href="#!" class="button">Link Button</a>

Answer 5

您可以使用slice()并跟踪起始索引：

//create  demo data array
var courses = getDemoData(),
  startIdx = 0,
  numItems = 5,
  $cont = $('#content');

function loadItems() {
  courses.slice(startIdx, startIdx + numItems).forEach(item => {
    $cont.append($('<li>', { text: item.title  }));
  });
  startIdx += numItems;
  // optional - hide button when none left
  if (startIdx >= courses.length) {
    $(this).hide();
  }
}
$('button').click(loadItems).click();

// helper for demo only
function getDemoData() {
  return new Array(18).fill().map((el, i) => {
    return {
      title: 'Item #' + (i + 1)
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Load More</button>
<ul id="content"></ul>