没有jQuery的分页.如何选择具有相同类的元素范围?我的逻辑说得通吗?
Pagination withOUT jQuery. How can I select a range of elements with the same class? Does my logic make any sense?
我正在做一个项目，我想为学生列表创建一个分页功能。有54个学生，我希望每页不超过10个。
列表(ul)本身的班级是"student-list"，学生个体(li)的班级是"student-item"。
当然，我还需要在页面底部创建链接到相应页面的按钮。
我的直觉告诉我把每个按钮和一个数字联系起来。如果按下该按钮，则将显示所需学生的范围。
我想通过设置所有的student-item 's为隐藏来做到这一点。根据点击的按钮，我可以设置一定范围的student-item’s可见。我该怎么做呢?如果没有jQuery，这可能吗?
//Problem: Shows too many people per page
//Solution: Incorporate pagination and add search functionality
var studentTotal = document.getElementsByClassName("student-item").length;
var pageCount = Math.ceil(studentTotal/10);
var pageNum;
var buttonNum = pageCount;
console.log(studentTotal);
console.log(pageCount);
//Add pagination feature
var displayPage = function() {
//Display first 10 students on initial page view, first 10 .student-items OF .studentList
//Hide all but first 10 students when the page loads
var divsToshow = document.getElementsByClassName("student-item");
//Display buttons
createButton();
//active button = page number
}
//Create enough buttons for amount of page numbers
var createButton = function() {
//add button list div, .pagination with an unordered list
//Create a button(li) for every page number
}
//Bind eventhandler to button action to display page
var bindButton = function() {
}
//If user clicks on 2 in pagination, students 11-20 are shown etc.
var buttonClick = function() {
//Simple animation when transitioning between pages
//call displayPage
displayPage();
}
这是我的html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Students</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/design.css">
</head>
<body>
<div class="page">
<div class="page-header cf">
<h2>Students</h2>
</div>
<ul class="student-list">
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/67.jpg">
<h3>iboya vat</h3>
<span class="email">iboya.vat@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 07/15/15</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/75.jpg">
<h3>aapo niskanen</h3>
<span class="email">aapo.niskanen@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 06/15/12</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/34.jpg">
<h3>phillip cox</h3>
<span class="email">phillip.cox@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 09/11/14</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/38.jpg">
<h3>zilda moreira</h3>
<span class="email">zilda.moreira@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 07/15/15</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/23.jpg">
<h3>lilou le gall</h3>
<span class="email">lilou.le gall@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 06/16/13</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/94.jpg">
<h3>lucy hall</h3>
<span class="email">lucy.hall@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 09/11/16</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/24.jpg">
<h3>mark colin</h3>
<span class="email">mark.colin@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 01/14/14</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/14.jpg">
<h3>sara alves</h3>
<span class="email">sara.alves@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 07/19/16</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/49.jpg">
<h3>ramon macrae</h3>
<span class="email">ramon.macrae@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 05/13/12</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/15.jpg">
<h3>connor taylor</h3>
<span class="email">connor.taylor@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 05/18/14</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/11.jpg">
<h3>aymeric morel</h3>
<span class="email">aymeric.morel@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 06/13/13</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/49.jpg">
<h3>lorenz otto</h3>
<span class="email">lorenz.otto@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 05/11/14</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/29.jpg">
<h3>karl williamson</h3>
<span class="email">karl.williamson@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 01/12/14</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/34.jpg">
<h3>ouassim heering</h3>
<span class="email">ouassim.heering@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 01/18/12</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/91.jpg">
<h3>roberto molina</h3>
<span class="email">roberto.molina@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 06/13/15</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/28.jpg">
<h3>jordan hubert</h3>
<span class="email">jordan.hubert@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 06/13/15</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/29.jpg">
<h3>melvin baker</h3>
<span class="email">melvin.baker@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 09/18/14</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/26.jpg">
<h3>everett gordon</h3>
<span class="email">everett.gordon@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 06/17/15</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/82.jpg">
<h3>aiden ma</h3>
<span class="email">aiden.ma@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 07/18/12</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/62.jpg">
<h3>florent gerard</h3>
<span class="email">florent.gerard@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 02/12/13</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/96.jpg">
<h3>amber chen</h3>
<span class="email">amber.chen@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 07/12/12</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/9.jpg">
<h3>alexandra davies</h3>
<span class="email">alexandra.davies@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 05/11/13</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/57.jpg">
<h3>sergio cole</h3>
<span class="email">sergio.cole@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 02/17/15</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/98.jpg">
<h3>edgar dixon</h3>
<span class="email">edgar.dixon@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 06/17/11</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/94.jpg">
<h3>kirk myers</h3>
<span class="email">kirk.myers@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 09/17/15</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/28.jpg">
<h3>ani hesseling</h3>
<span class="email">ani.hesseling@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 08/14/16</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/24.jpg">
<h3>victoire bonnet</h3>
<span class="email">victoire.bonnet@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 05/13/16</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/44.jpg">
<h3>marcos morales</h3>
<span class="email">marcos.morales@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 01/12/12</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/75.jpg">
<h3>nils neumann</h3>
<span class="email">nils.neumann@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 03/11/12</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/86.jpg">
<h3>emily harrison</h3>
<span class="email">emily.harrison@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 07/18/15</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/41.jpg">
<h3>matthew fortin</h3>
<span class="email">matthew.fortin@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 03/18/15</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/32.jpg">
<h3>charlotte steward</h3>
<span class="email">charlotte.steward@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 02/18/11</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/3.jpg">
<h3>marceau rodriguez</h3>
<span class="email">marceau.rodriguez@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 07/13/14</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/91.jpg">
<h3>hudson anderson</h3>
<span class="email">hudson.anderson@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 09/12/15</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/33.jpg">
<h3>warren phillips</h3>
<span class="email">warren.phillips@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 01/11/12</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/41.jpg">
<h3>leo niva</h3>
<span class="email">leo.niva@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 09/14/15</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/3.jpg">
<h3>hani prevoo</h3>
<span class="email">hani.prevoo@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 01/11/15</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/79.jpg">
<h3>veronica rodriguez</h3>
<span class="email">veronica.rodriguez@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 07/17/12</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/41.jpg">
<h3>ginestal das neves</h3>
<span class="email">ginestal.das neves@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 06/19/12</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/63.jpg">
<h3>devon barnes</h3>
<span class="email">devon.barnes@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 09/19/14</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/55.jpg">
<h3>brennan pierce</h3>
<span class="email">brennan.pierce@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 05/15/14</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/35.jpg">
<h3>zachary singh</h3>
<span class="email">zachary.singh@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 05/19/11</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/35.jpg">
<h3>arlo harris</h3>
<span class="email">arlo.harris@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 07/12/15</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/60.jpg">
<h3>hannah ginnish</h3>
<span class="email">hannah.ginnish@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 05/17/14</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/95.jpg">
<h3>goos brunt</h3>
<span class="email">goos.brunt@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 09/15/12</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/91.jpg">
<h3>eduard riedel</h3>
<span class="email">eduard.riedel@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 06/12/15</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/42.jpg">
<h3>geesken jekel</h3>
<span class="email">geesken.jekel@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 02/12/13</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/54.jpg">
<h3>dolores ryan</h3>
<span class="email">dolores.ryan@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 06/17/16</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/49.jpg">
<h3>steven rogers</h3>
<span class="email">steven.rogers@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 01/18/11</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/63.jpg">
<h3>virgulino silva</h3>
<span class="email">virgulino.silva@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 03/18/11</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/11.jpg">
<h3>lucile bertrand</h3>
<span class="email">lucile.bertrand@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 06/13/16</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/10.jpg">
<h3>elsa lahti</h3>
<span class="email">elsa.lahti@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 04/15/12</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/12.jpg">
<h3>soline leclercq</h3>
<span class="email">soline.leclercq@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 05/12/14</span>
</div>
</li>
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/89.jpg">
<h3>henri kruse</h3>
<span class="email">henri.kruse@example.com</span>
</div>
<div class="joined-details">
<span class="date">Joined 05/14/13</span>
</div>
</li>
</ul>
</div>
<div class="pagination">
<ul>
</ul>
</div>
</body>
<script type="text/javascript" src="js/app.js"></script>
</html>
下面是一个示例，如果我有5个按钮，我的分页html按钮应该是什么样子:
<div class="pagination">
<ul>
<li>
<a class="active" href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
</ul>
</div>
VanillaJS显示学生项目10-19并隐藏其他项目:
var studentItems = document.querySelectorAll('li.student-item');
Array.prototype.forEach.call(studentItems, function(e, i) {
e.style.display = (i >= 10 && i < 20) ? 'block' : 'none';
});
您可以将其概括为showPage(page)函数
我为您创建了一个JSFiddle
JavaScriptvar PAGE_STUDENT = 2; // Declare how many studuents to show per page
var studentArray = document.getElementsByClassName("student-item");
var studentNum = studentArray.length; // totle number of students
function displayPage (pageNow) {
//Display PAGE_STUDENT students according to pageNow
var i;
// Hide or show student according to current page
for (i = 0; i < studentNum; i++) {
if (i < pageNow * PAGE_STUDENT || i >= (pageNow + 1) * PAGE_STUDENT) {
studentArray[i].style.display = 'none';
} else {
studentArray[i].style.display = 'block';
}
}
}
function displayButton () {
var paginationUl = document.getElementById("paginationList");
var pages = Math.ceil(studentNum / PAGE_STUDENT); // Calculate total pages
var i;
for (i = 0; i < pages; i++) {
var li = document.createElement('li');
li.onclick = (function (j) { return function () {displayPage(j);} }(i)); // shoe certain page. Use closure to remenber i
var textnode = document.createTextNode(i + 1);
li.appendChild(textnode);
paginationUl.appendChild(li);
}
}
// Display initial page, i.e., the first ten student
displayPage(0);
//Display buttons
displayButton();
另外，我在你的ul中添加了一个paginationList来简化代码。
<div class="pagination">
<ul id="paginationList">
</ul>
</div>
相关文章：
- 为什么当我分配给element.style时，我的元素的样式没有改变
- 火虫找到隐藏我的元素的脚本
- 为什么动画完成后我的元素不再隐藏
- 如何使用“;点击“;在创建我的元素之前
- Javascript似乎并没有取消隐藏我的元素
- 如何知道我的元素是否溢出
- Jquery index(） 找不到我的元素
- 语义 UI 模态导致我的元素在关闭后从 DOM 中消失
- appendTo 不会将我的元素放在我想要的位置
- JQuery可以'找不到我的元素.为什么?
- 为什么未能将transform:none应用于我的元素
- 为什么我不能将ng-click附加到我的元素
- Vue.js:为什么我的v-else指令会导致我的元素被多次渲染
- 为什么我的
- 元素上的颜色属性没有改变我的 .hover(） 事件处理程序
- 如何使我的元素在Javascript中的显示属性发生更改时淡入淡出
- 为什么`document.getElementById(“#datepicker1”）`找不到我的元素
- jQuery$(this）不会在我的元素中插入文本
- 为什么我的元素只显示/隐藏当信用卡被选中
- 我的元素上哪个jquery附加事件首先触发
- 为什么我的元素在页面加载时大小不正确?
