<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<div class="box"></div>
<button onclick="last()">上一组</button>
<button onclick="next()">下一组</button>
<script>
var arr = ['-1', '-2', '-3', '-4', '-5', '-6', '-7', '-8', '-9', '-10', '-11', '-12', '-13', '-14', '-15', '-16', '-17']
var newArr = [] //新数组
var index = 0;//初始下标
var length = 5;//显示5条
for (var i = index; i < length + index; i++) {
newArr.push(arr[i]);
}
$('.box').html(newArr)
// 上一组
function last() {
if (index > 0) {
index = index - length;
}
// 不需要循环删除else
else {
index = arr.length - length
}
newArr = []
for (var i = index; i < length + index; i++) {
newArr.push(arr[i])
}
$('.box').html(newArr)
}
// 下一组
function next() {
if (index < arr.length - length) {
index = index + length
}
// 不需要循环删除else
else {
index = 0
}
newArr = []
for (var i = index; i < length + index; i++) {
newArr.push(arr[i])
}
$('.box').html(newArr)
}
</script>
</body>
</html>
jquery分页原理/数组分组
最新推荐文章于 2023-03-01 10:10:25 发布