为 li 列表创建"上一页/下一页"

Question

我正在创建一个由PHP中继器生成的li列表，该中继器抓取Wordpress的博客文章并将标题放在完整的li列表中。

但是，我正在尝试对其进行编码，以便仅显示前七个 li，要查看下一个或前七个，您必须分别单击"上一个"或"下一个"按钮。

这就是我所拥有的一切，我不知道从哪里开始关于jQuery的最佳方法，最好的方法是什么？

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

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

Answer 1

我希望这就是你想要的。

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

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

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

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

Answer 2

我把大部分评论都偷偷放在代码中...... 但本着"从哪里开始"的精神：

1. 创建一个将隐藏/显示列表项部分的函数
2. 向该函数传递一个参数，该参数将帮助您确定您正在查看的页面
3. 创建上一个和下一个函数以连接到您的链接
4. 添加一些健全性检查，以确保代码不会在其自己的边界之外执行(例如点击"下一步"并最终出现在不存在的第 3 页(

这段代码不是jQuery，而是传统的(香草(JavaScript。

// 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';
}
}

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

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

Answer 3

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

否则，您需要为此创建 PHP 分页脚本

Answer 4

jQuery.slice((

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

结构：jQuery.slice(from, to)

它从 0 开始。因此，jQuery.slice(7， 10( 将选择元素 8、9、10 和 11。 这是文档

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

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

将单击侦听器添加到.next以隐藏前 7 个lislice。

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