javascript - 如何使用 jquery 将项目列表转换为 "multi-page"列表

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>