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项目，当按钮＆＃34;显示下一个9个项目＆＃34;将被点击它将显示下一组9项。而且当＆＃34;显示所有项目＆＃34;将被点击，所有结果都应显示。

*更新当＆＃34;接下来的9个项目＆＃34;时，所有旧项目都需要隐藏应该点击

非常感谢任何帮助

Answer 1

您可以使用:not(:visible)和:lt(9);

的组合

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

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

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

<强>演示

＆＃13;

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

＆＃13;

.items {
  display: none
}

＆＃13;

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

＆＃13;

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

<强>演示

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

Code for Pagination

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

3 个答案: