使用 jQuery 过滤分页列表项

Question

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

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

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

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

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

在 containing.hide(); 行我收到此错误：

jQuery.Deferred exception: Cannot read property 'style' of undefined 类型错误：无法读取属性'style' of undefined

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

Answer 1

这就是我展示页面 function 的方式。

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