创建＆＃34; prev / next＆＃34;为李清单

Question

我正在创建一个li列表，该列表由PHP转发器生成，它可以抓取Wordpress＆＃39;博客帖子并将标题放在完整的列表中。

但是，我尝试对其进行编码，因此只显示前七个，并且要查看下一个或前七个，您必须点击＆＃34; prev＆＃34;或＆＃34; next＆＃34;按钮分别。

以下是我所拥有的一切，我不知道最好开始使用jQuery，哪种方法最好？

＆＃13;

＆＃13;

ul > li {
  font-size: 25px;
  list-style: none;
  cursor: pointer;
  padding-left: 0;
  color: #000;
  
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}

ul >li:hover {
  padding-left: 30px;
  color: green;
}

.wrapper {
  float: left;
}

.wrapper a {
  font-size: 20px;
  color: red;
  text-decoration: underline;
}

.wrapper .prev {
  float: left;
}

.wrapper .next {
  float: right;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
  <ul>
    <li>Message 1</li>
    <li>Message 2</li>
    <li>Message 3</li>
    <li>Message 4</li>
    <li>Message 5</li>
    <li>Message 6</li>
    <li>Message 7</li>
    <li>Message 8</li>
    <li>Message 9</li>
    <li>Message 10</li>
    <li>Message 11</li>
  </ul>

  <a href="#" class="prev">prev</a>
  <a href="#" class="next">next</a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我希望这就是你想要的。

current变量用作指向li元素当前可见的指针。因此，只要您点击.next或.prev按钮，此功能就会显示所有li元素，然后隐藏超出范围的元素。

＆＃13;

＆＃13;

var current = 0;
var $li = $(".wrapper li");

$(".prev, .next").on('click', function() {
  if ($(this).hasClass("next")) {
    current+= 7;
    if (current >= $li.length) {
      current = current - 7;
    }
  } else {
    current-= 7;
    if (current < 0) {
      current = 0;
    }
  }
  hideLi();
});

hideLi();

function hideLi() {
  $li.show();
  $li.each(function(i, e) {
    if (i < current || i >= current+7) {
      $(e).hide();
    }
  });
}

＆＃13;

ul>li {
  font-size: 25px;
  list-style: none;
  cursor: pointer;
  padding-left: 0;
  color: #000;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}

ul>li:hover {
  padding-left: 30px;
  color: green;
}

.wrapper {
  float: left;
}

.wrapper a {
  font-size: 20px;
  color: red;
  text-decoration: underline;
}

.wrapper .prev {
  float: left;
}

.wrapper .next {
  float: right;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
  <ul>
    <li>Message 1</li>
    <li>Message 2</li>
    <li>Message 3</li>
    <li>Message 4</li>
    <li>Message 5</li>
    <li>Message 6</li>
    <li>Message 7</li>
    <li>Message 8</li>
    <li>Message 9</li>
    <li>Message 10</li>
    <li>Message 11</li>
    <li>Message 12</li>
    <li>Message 13</li>
    <li>Message 14</li>
    <li>Message 15</li>
    <li>Message 16</li>
    <li>Message 17</li>
    <li>Message 18</li>
    <li>Message 19</li>
  </ul>

  <a href="#" class="prev">prev</a>
  <a href="#" class="next">next</a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我在代码中窃听了大部分评论...... 但本着＃34;从哪里开始＆＃34;：

1. 创建一个隐藏/显示列表项的部分的功能
2. 将该功能传递给您，该参数可帮助您确定您正在查看的页面
3. 创建上一个和下一个功能以连接到您的链接
4. 添加一些完整性检查以确保代码不会在其自身范围之外执行（例如点击＆＃34;接下来＆＃34;并最终在第3页上没有完成存在）

这段代码不是jQuery，它的传统（vanilla）JavaScript。

＆＃13;
＆＃13;
// set a global variable to track your "current page"
let currentPage = 1;
// set a global variable on how many LIs to show per page
let perPage     = 7;
// get the nodeList of all the LIs you wish to hide/show
// (paginate)
let liList      = document.getElementsByClassName('wrapper')[0].getElementsByTagName('li');
// find the total number of LIs available
let totalLis    = liList.length;
// find the number of pages...
// parseInt to strip away the decimals
// +1 because we're starting with 1
let totalPages  = parseInt( totalLis / perPage ) + 1;

// subtract from the global variable currentPage
// but don't let it go less than 1
function previous(){
  currentPage--;
  if( currentPage < 1 ){
    currentPage = 1;
  }
  page( currentPage );
}

// add to the global variable currentPage
// but don't let it exceed the totalPages count
function next(){
  currentPage++;
  if( currentPage > totalPages ){
    currentPage = totalPages;
  }
  page( currentPage );
}

function page( pageNum = 1 ){
  // Find the end range of pages you want to view
  let end   = pageNum * perPage;
  // Then subtract your perPage total to find the 
  // start value
  let start = end - perPage;
  // quicky sanity check to make sure you don't exceed
  // the available elements
  if( end > liList.length ){
    end = liList.length;
  }
  // hide ALL the list items
  for( let i=0, x=liList.length; i<x; i++ ){
    liList[i].style.display = 'none';
  }
  // but then show the ones within your chosen range
  for( let i=start, x=end; i<x; i++ ){
    liList[i].style.display = 'block';
  }
}
＆＃13;
ul > li {
  font-size: 25px;
  list-style: none;
  cursor: pointer;
  padding-left: 0;
  color: #000;
}

ul > li:nth-child(n+8){
  display: none;
}

.wrapper {
  float: left;
}

.wrapper a {
  font-size: 20px;
  color: red;
  text-decoration: underline;
}

.wrapper .prev {
  float: left;
}

.wrapper .next {
  float: right;
}
＆＃13;
<div class="wrapper">
  <ul>
    <li>Message 1</li>
    <li>Message 2</li>
    <li>Message 3</li>
    <li>Message 4</li>
    <li>Message 5</li>
    <li>Message 6</li>
    <li>Message 7</li>
    <li>Message 8</li>
    <li>Message 9</li>
    <li>Message 10</li>
    <li>Message 11</li>
  </ul>

  <a href="javascript: previous()" class="prev">prev</a>
  <a href="javascript: next()" class="next">next</a>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 3

它被称为分页，请使用数据表 https://datatables.net/检查此站点是否基于java脚本试试这个，或者你可以找到很多替代方案

否则你需要为那个

创建php分页脚本

Answer 4

  

jQuery.slice（）

     

将匹配元素集减少到由一系列索引指定的子集。

     

结构：jQuery.slice(from, to)

     

它基于0。因此，jQuery.slice（7,10）将选择元素no 8,9,10和11。   Here's the documentation

首先，您需要隐藏li 8-11。

$("ul li").slice(7,10).hide()

向.next添加点击监听器，以隐藏前{7} li slice。

$(".next").click(function(){
 $('ul li').slice(0, 6).hide();
}

向.prev添加点击监听器以再次显示前7并隐藏8-11。

$(".prev").click(function(){
 $("ul li").slice(0, 6).show();
 $("ul li").slice(7, 10).hide();
}