Come trasformare un elenco di elementi in un elenco "multipagina" con jquery

Question

Ho un sito Web che crea dinamicamente un elenco di post e non ho accesso alla funzione che crea il contenuto, quindi ho lavorare con ciò che viene emesso.

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

La funzione crea 21 elementi in un formato elenco (uno sopra l'altro). Quello che sto cercando di ottenere è forse solo avere 7 visibili alla volta e avere una freccia di navigazione per mescolare i vari gruppi di oggetti.

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

Utilizzando .slice Sono stato in grado di indirizzare i set di 7, ma per quanto riguarda come nascondere e scorrere i set, sono un po 'perso.

Qualsiasi aiuto sarebbe molto apprezzato

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

avvolgere la div id = # avvolgere in un altro div e impostare l'altezza a tuttavia gran parte della lista che si desidera in vista e il troppo pieno a nascosto. Quindi puoi usare un'animazione o una funzione addClass per cambiare la posizione: relativa sul tuo #wrap per spostarti su e giù.

modifica: OK Ho fatto un jsfiddle facendo ciò che ho descritto sopra.

jsfiddle

Ciò l'effetto di scorrimento animato che stavi cercando.

$(".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 3

Ecco il violino per questa risposta: https://jsfiddle.net/sgafbsft/.

Con questa soluzione si dispone anche di paging infinito, quindi dopo aver fatto clic su "Avanti" nell'ultima pagina, viene visualizzata la prima pagina e se si fa clic su anteprima sulla prima pagina, viene visualizzata l'ultima pagina.

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

Answer 4

Solo per divertimento, un altro che non dipende avere il numero di elementi in anticipo (come se sono generati dinamicamente ...) e ha una variabile di cambiare la dimensione della pagina.

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>