如何使用jquery将项目列表转换为"多页"列表

Question

我有一个动态创建帖子列表的网站,我无法访问创建内容的功能,所以我必须处理输出的内容.

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

该函数以列表格式创建21个项目(一个在另一个上面).我想要达到的目标可能是一次只能看到7个,并且可以通过箭头导航对各种项目进行随机播放.

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

使用.slice我已经能够定位7的集合,但就如何隐藏和滚动集合,我有点迷失.

任何帮助将不胜感激

https://jsfiddle.net/ga8vtojg/

Answer 1

只是为了好玩，还有一个不依赖于预先拥有项目数量（比如它们是否是动态生成的......）并且有一个变量来改变页面大小。

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 2

演示版

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>