显示特定长度的div元素分页

Question

我想知道如何通过分页显示项目的特定长度。 下面的元素代码显示了 20 项 div 元素。

<div class="group-of-element">
<div class="items">item1</div>
<div class="items">item2</div>
<div class="items">item3</div>
<div class="items">item4</div>
<div class="items">item5</div>
<div class="items">item6</div>
<div class="items">item7</div>
<div class="items">item8</div>
<div class="items">item9</div>
<div class="items">item10</div>
<div class="items">item12</div>
<div class="items">item13</div>
<div class="items">item14</div>
<div class="items">item15</div>
<div class="items">item16</div>
<div class="items">item17</div>
<div class="items">item18</div>
<div class="items">item19</div>
<div class="items">item20</div>
</div>

结果会是这样的

将显示前 9 个 div 项目，当单击“显示下一个 9 个项目”按钮时，它将显示下一组 9 个项目。而且当点击“显示所有项目”时，应该显示所有结果。

*更新了当点击“下 9 个项目”时，所有旧项目都需要隐藏

任何帮助将不胜感激

Answer 1

您可以使用:not(:visible) 和:lt(9) 的组合；

:not(:visible) 将选择不可见的元素。

:lt(9) 将选择前 9 个项目。

$(".next").click(function() {
  $(".group-of-element .items:not(:visible):lt(9)").show();
})

演示

$(".next").click(function() {
  var showele = $(".group-of-element .items:not(:visible):lt(9)");
  $(".group-of-element .items").hide();
  showele.show();
})

$(".all").click(function() {
  $(".group-of-element .items").show();
})

.items {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="group-of-element">
  <div class="items">item1</div>
  <div class="items">item2</div>
  <div class="items">item3</div>
  <div class="items">item4</div>
  <div class="items">item5</div>
  <div class="items">item6</div>
  <div class="items">item7</div>
  <div class="items">item8</div>
  <div class="items">item9</div>
  <div class="items">item10</div>
  <div class="items">item12</div>
  <div class="items">item13</div>
  <div class="items">item14</div>
  <div class="items">item15</div>
  <div class="items">item16</div>
  <div class="items">item17</div>
  <div class="items">item18</div>
  <div class="items">item19</div>
  <div class="items">item20</div>
</div>
<button class="next">show next 9</botton><button class="all">all</botton>

Answer 2

您需要跟踪显示的项目，请遵循此方法

document.querySelector( "#next" ).addEventListener( "click", function(){
   $( ".group-of-element .items" ).hide().filter( i => i >= lastValue && i <= lastValue + numberOfItems - 1 ).show();
   lastValue = lastValue + numberOfItems > totalItems ? totalItems - 1 :  lastValue + numberOfItems;
});

document.querySelector( "#prev" ).addEventListener( "click", function(){
   console.log(lastValue);
   $( ".group-of-element .items" ).hide().filter( i => i <= lastValue && i >= lastValue - numberOfItems + 1 ).show();
   lastValue = lastValue - numberOfItems < 0 ? 0 :  lastValue - numberOfItems;
});

演示

var numberOfItems = 9;
var lastValue = 8;
var totalItems = $( ".group-of-element .items" ).length;

$( ".group-of-element .items" ).filter( i => i >= numberOfItems ).hide();

document.querySelector( "#next" ).addEventListener( "click", function(){
   $( ".group-of-element .items" ).hide().filter( i => i >= lastValue && i <= lastValue + numberOfItems - 1 ).show();
   lastValue = lastValue + numberOfItems > totalItems ? totalItems - 1 :  lastValue + numberOfItems;
});


document.querySelector( "#prev" ).addEventListener( "click", function(){
   console.log(lastValue);
   $( ".group-of-element .items" ).hide().filter( i => i <= lastValue && i >= lastValue - numberOfItems + 1 ).show();
   lastValue = lastValue - numberOfItems < 0 ? 0 :  lastValue - numberOfItems;
});

.items {
  background-color: #0cf;
  width: 32%;
  padding: 20px 0px;
  border: 1px solid #000;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="group-of-element">
  <div class="items">item1</div>
  <div class="items">item2</div>
  <div class="items">item3</div>
  <div class="items">item4</div>
  <div class="items">item5</div>
  <div class="items">item6</div>
  <div class="items">item7</div>
  <div class="items">item8</div>
  <div class="items">item9</div>
  <div class="items">item10</div>
  <div class="items">item12</div>
  <div class="items">item13</div>
  <div class="items">item14</div>
  <div class="items">item15</div>
  <div class="items">item16</div>
  <div class="items">item17</div>
  <div class="items">item18</div>
  <div class="items">item19</div>
  <div class="items">item20</div>
</div>
<button id="next">Next</button><button id="prev">prev</button>

Answer 3

客户端分页请参考以下链接，包括Jquery pagination.js

Code for Pagination