How to convert a list of items to a multi-page list with jquery

Question

I have a website that dynamically creates a list of messages, and I do not have access to a function that creates content, so I need to work with what is displayed.

<div id="wrap"> <div>Item 1</div> <div>Item 2</div> ... <div>Item 20</div> <div>Item 21</div> </div> 

The function creates 21 elements in a list format (one on top of the other). What I'm looking for to achieve may only have 7 visible at a time, and has a navigation arrow to shuffle through different sets of elements.

 $("#wrap > div").slice(0,7).css("background","yellow"); $("#wrap > div").slice(7,14).css("background","red"); $("#wrap > div").slice(14,21).css("background","blue"); 

Using .slice , I was able to target a set of 7, but as far as you can hide and scroll sets, I got a little lost.

Any help would be greatly appreciated.

https://jsfiddle.net/ga8vtojg/

Answer 1

Demo

 var page = 1; $("#wrap > div").slice(0, 7).addClass('page1').css("background", "yellow"); $("#wrap > div").slice(7, 14).addClass('page2').css("background", "red").hide(); $("#wrap > div").slice(14, 21).addClass('page3').css("background", "blue").hide(); var maxPage = 3; $('.next').on('click', function() { if (page < maxPage) { $("#wrap > div:visible").hide(); $('.page' + ++page).show(); } }) $('.prev').on('click', function() { if (page > 1) { $("#wrap > div:visible").hide(); $('.page' + --page).show(); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <div id="wrap"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> <div>Item 5</div> <div>Item 6</div> <div>Item 7</div> <div>Item 8</div> <div>Item 9</div> <div>Item 10</div> <div>Item 11</div> <div>Item 12</div> <div>Item 13</div> <div>Item 14</div> <div>Item 15</div> <div>Item 16</div> <div>Item 17</div> <div>Item 18</div> <div>Item 19</div> <div>Item 20</div> <div>Item 21</div> </div> <div class="next">Next</div> <div class="prev">Prev</div> 

Answer 2

Just for fun, another one that does not depend on the number of elements in advance (for example, if they are dynamically generated ...) and has a variable for resizing the page.

 var $el = $("#wrap > div"); var pageSize = 7; $el.slice(0, pageSize).css({background: 'yellow', display: 'block'}); $el.slice(pageSize, $el.length).css({background: 'yellow', display: 'none'}); function addSlice(num){ return num + pageSize; } function subtractSlice(num){ return num - pageSize; } var slice = [0, pageSize]; $('.next').click(function(){ if (slice[1] < $el.length ){ slice = slice.map(addSlice); } showSlice(slice); }); $('.prev').click(function(){ if (slice[0] > 0 ){ slice = slice.map(subtractSlice); } showSlice(slice); }); function showSlice(slice){ $el.css('display', 'none'); $el.slice(slice[0], slice[1]).css('display','block'); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrap"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> <div>Item 5</div> <div>Item 6</div> <div>Item 7</div> <div>Item 8</div> <div>Item 9</div> <div>Item 10</div> <div>Item 11</div> <div>Item 12</div> <div>Item 13</div> <div>Item 14</div> <div>Item 15</div> <div>Item 16</div> <div>Item 17</div> <div>Item 18</div> <div>Item 19</div> <div>Item 20</div> <div>Item 21</div> </div> <div class="next">Next</div> <div class="prev">Prev</div> 

Answer 3

Wrap your div id = # wrap in another div and set the height anyway from the list you want to view, and the overflows are hidden. Then you can use the animation function or addClass to change the position: relative to #wrap to move up and down.

edit: OK I did jsfiddle by doing what I described above.

jsfiddle

This is the animated sliding effect you were looking for.

 $(".next").click(function(){ if($("#wrap").offset().top >= -126){ $("#wrap").animate({top: '-=126px'}); } }); $('.prev').click(function() { if($("#wrap").offset().top <= 0){ $("#wrap").animate({top: '+=126px'}); } }); 

Answer 4

Here's the script for this answer: https://jsfiddle.net/sgafbsft/ .

With this solution, you also have endless paging, so after clicking "Next" on the last page, the first page is displayed, and if you click "prev" on the first page, the last page will be displayed.

Javascript

 var itemBlockArray = new Array(); var currentIndex = 0; itemBlockArray.push($("#wrap > div").slice(0,7).css("background","yellow")); itemBlockArray.push($("#wrap > div").slice(7,14).css("background","red").hide()); itemBlockArray.push($("#wrap > div").slice(14,21).css("background","blue").hide()); $('.next').click(function() { itemBlockArray[currentIndex].hide(); itemBlockArray[getPageIndex(1)].show(); }); $('.prev').click(function() { itemBlockArray[currentIndex].hide(); itemBlockArray[getPageIndex(-1)].show(); }); function getPageIndex(indexAddition) { var newIndex = currentIndex + indexAddition; if (newIndex < 0) { var lastPage = itemBlockArray.length - 1; currentIndex = lastPage return currentIndex; } else if (newIndex > (itemBlockArray.length - 1)) { currentIndex = 0; return currentIndex; } currentIndex = newIndex; return currentIndex; }