Wie eine Liste von Elementen zu einer "mehrseitigen" Liste mit jquery

Question

machen Ich habe eine Website, die dynamisch eine Liste von Beiträgen erstellt, und ich habe keinen Zugriff auf die Funktion, die den Inhalt erstellt, also habe ich um mit dem zu arbeiten, was ausgegeben wird.

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

Die Funktion erstellt 21 Elemente in einem Listenformat (übereinander). Was ich erreichen möchte, ist vielleicht nur 7 zu einer Zeit sichtbar, und Pfeil Navigation haben, um durch die verschiedenen Sätze von Elementen zu mischen.

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

Mit .slice Ich habe in der Lage gewesen, die Sätze von 7 zu zielen, aber soweit wie durch die Sätze zu verstecken und zu bewegen, ich bin ein wenig verloren.

Jede Hilfe wäre sehr geschätzt

sein

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

Wickeln Sie Ihre div id = # Wrap in einem anderen div und stellen Sie die Höhe jedoch viel von der Liste zu Ihnen in Sicht und der Überlauf versteckt werden soll. Dann können Sie eine Animation oder eine addClass-Funktion verwenden, um die Position zu ändern: relativ auf Ihrer #Wrap, um sich nach oben und unten zu bewegen.

bearbeiten: OK Ich habe eine Aktion gemacht, was ich oben beschrieben habe.

jsfiddle

Dies ist die animierte Gleitwirkung Sie suchen.

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

Hier ist die Geige für diese Antwort: https://jsfiddle.net/sgafbsft/.

Mit dieser Lösung haben Sie auch endlose Seitenwechsel. Wenn Sie also auf der letzten Seite auf "Weiter" klicken, wird die erste Seite angezeigt. Wenn Sie auf der ersten Seite auf die vorherige Seite klicken, wird die letzte Seite angezeigt.

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

Just for fun, eine mehr, die nicht davon abhängt, die Anzahl der Elemente im Voraus mit (wie wenn sie dynamisch erzeugt werden, ...) und hat eine Variable zu ändern die Seitengröße.

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>