Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <a href="#" id="next">NEXT</a>
  <ul id="list"></ul>
</body>
</html>
 
// just preparing some data
var arr = [];
for (var i = 1; i <= 100; i++) {
  arr.push({ name: 'name' + i, id: 'id' + i });
}
// our variable holding starting index of this "page"
var index = 0;
// display our initial list
displayNext();
$("#next").click(function() {
  // display next elements
  displayNext();
});
function displayNext() {
  // get the list element
  var list = $('#list');
  
  // get index stored as a data on the list, if it doesn't exist then assign 0
  var index = list.data('index') % arr.length || 0;
  
  // save next index - for next call
  list.data('index', index + 20);
  
  // 1) get 20 elements from array - starting from index, using Array.slice()
  // 2) map them to array of li strings
  // 3) join the array into a single string and set it as a HTML content of list
  list.html($.map(arr.slice(index, index + 20), function(val) {
    return '<li id=' + val.id + '>' + val.name + '</li>';
  }).join(''));
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers