使用 jQuery 筛选分页列表项

Question

作为学习 JavaScript 项目的一部分，我目前正在构建一个网站，其中包含 50+ 个代表学生的 html 列表项，并编写一个.js文件将所有项目分页为 10 页，以及一个搜索功能，该功能将根据学生的名字过滤显示哪些学生。

下面是这些列表项的外观示例：

<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">[e-mail]</span>
</div>
<div class="joined-details">
<span class="date">Joined 09/11/16</span>
</div>
</li>

我编写的用于对列表项进行分页的函数运行良好，但是我正在努力实现搜索/过滤器功能。这是我为搜索编写的代码：

//------------------------SEARCH CONTENT OPEN--------------------------------//
//adding elements for the search bar
let searchBar = document.createElement('div.student-search');
let searchField = document.createElement('input');
$(searchField).attr('placeholder', 'Search for students...');
let searchButton = document.createElement('button');
$(searchButton).append('Search');
$('div.page-header').append(searchBar);
$(searchBar).append(searchField);
$(searchBar).append(searchButton);
// Variables for search functionality
let $filter = $(searchField).val().toLowerCase();
let $names = $($fullList).children('h3');
$(searchBar).on('keyup', (event) => {
$($names).filter(() => {
$(this).toggle($(this).text().toLowerCase().indexOf($filter) > -1);
});
});
//--------------------SEARCH CONTENT CLOSE-------------------------------//

将此代码添加到我的网站对列表项、它们的分页方式或网站上除了添加到页面的搜索栏元素之外的任何其他内容都没有影响。

我认为这可能与我收到的一个非常奇怪的错误有关，因为我如何显示和隐藏学生。这是我的做法：

function showPage(list, page){
for(var i = 0; i <= list.length; i+= 1){
let currentStudent = list[i];
let studentMin = page * 10;
let studentMax = studentMin + 9;
// Arrays for jQuery targets
let showList = [];
let hideList = [];
if(i >= studentMin && i <= studentMax){
showList.push(currentStudent);
}else{
hideList.push(currentStudent);
}
// adding hide to the old students and fading in the new students
$(hideList).hide();
$(showList).fadeIn();
}
}

在包含 .hide(( 的行处;我收到此错误：

jQuery.Deferred 异常：无法读取未定义的属性"style">

错误：无法读取未定义的属性"style">

无论我在哪里放置调用 showPage 函数的父函数的代码行，之后的每一行都不会运行。例如，当我将父函数放在代码之前以实现搜索栏时，代码甚至不会创建变量或添加元素，但是如果我将父函数放在所有内容的末尾，它会运行，但不起作用。

Answer 1

这就是我执行showPage功能的方式。

function showPage(list, page) {
const startIndex = page * 9 - 9;
const endIndex = page * 9;
studentlist.innerHTML = "";
let studentInfo = "";
//If no results found during search
if (list.length === 0) {
studentInfo += `<p class="no-results">No Results Found</p>`;
} else {
for (let i = 0; i < list.length; i++) {
if (i >= startIndex && i < endIndex) {
studentInfo += `
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="${list[i].picture.large}" alt="Profile Picture">
<h3>${list[i].name.first} ${list[i].name.last}</h3>    
<span class="email">${list[i].email}</span>
</div>
<div class="joined-details">
<span class="date">Joined ${list[i].registered.date}</span>
</div>
</li>`;
}
}
}
studentlist.insertAdjacentHTML("beforeend", studentInfo);
}

这是我的GitHub存储库