Question

我正在为Jquery中的学生列表开发搜索功能，虽然我可以将正确的结果打印到控制台，但结果却没有出现在页面上。当匹配时，我在控制台中收到以下错误。我只是不确定我在选择器上声明listStudents变量的方式是否有问题？是不是可以在这样的选择器数组上运行每个函数？我很难过。

Uncaught TypeError: listName.each is not a function
    at showPage (main.js:10)
    at searchList (main.js:92)
    at HTMLButtonElement.<anonymous> (main.js:54)

下面是我的JS文件

var listStudents = $(".student-list").children();
var numStudents = listStudents.length;;


function showPage(pageNum, listName) {
    // first hide all students on the page
    $(".student-list li").hide();
    pageNum = parseInt(pageNum);
    // Then loop through all students in our student list argument
    listName.each(function(index){
    // if student should be on this page number
        if ((index >= ((pageNum*10)-10)) &&  (index <= (pageNum*10))) {
        // show the student
            $(this).show();
            }
    });

 }

function getNumPages(numStudents){
    numPages = Math.ceil(numStudents/10);
    return numPages;
    }


function appendPageLinks(numStudents) {
    // determine how many pages for this student list
    pages  = getNumPages(numStudents);
    // create a page link section
    var nav = "<div class='pagination'><ul>"
    for (i=1; i<pages+1; i+=1){
        nav += ("<li>" + "<a href='#' id=" + i + ">" + i + "</a>" + "</li>");
    };
    nav += ("</ul></div>");
    $(".student-list").after(nav);

    // define what happens when you click a link
    var active = $('.pagination a').click(function(){
        // Use the showPage function to display the page for the link clicked
        var id = $(this).attr('id');
        showPage(id,listStudents);
        // mark that link as “active”
        active.removeClass('active');
        $(this).addClass("active");
        });
}

function appendSearchBox(){
    var search = "<div class='student-search'><input id='search' placeholder='Search for students...'><button>Search</button></div>"
    $(".students").after(search);

    // Add click event handler
    $("button").click(function() {
        searchList();
    });

}

function searchList() {
    var matched = []
    // Obtain the value of the search input
    input = $("#search").val();
    // remove the previous page link section
    $('.pagination').hide();
    // Loop over the student list, and for each student…
    listStudents.each(function(){
        // ...obtain the student’s name…
        var name = $(this).find("h3").text();
        // ...and the student’s email…
        var email = $(this).find(".email").text();
        // ...if the search value is found inside either email or name…
        if (name.includes(input) || email.includes(input))  {
             // ...add this student to list of “matched” student
             matched.push($(this));
             $(".student-list").hide();
             console.log(email);
             console.log(name);
             }
     });
     // If there’s no “matched” students…
     if (matched.length === 0){
         // ...display a “no student’s found” message
         $(".student-list li").hide();
         var message = ("Sorry, no student's found!");
         $("#message").show();
     } else if (matched.length <= 10) {
        // ...call appendPageLinks with the matched students
         $(".student-list li").hide();
         showPage(1, matched);
     } else {
        $(".student-list li").hide();
        showPage(1, matched);
        appendPageLinks(matched.length);
     }
    $('#search').value = ''; // Clears search field
}

//Dynamically add search
appendSearchBox();
//Create pagination dynamically
appendPageLinks(numStudents);
//Show first page on load
showPage(1, listStudents);

这是HTML中学生列表的示例 - 我正在调用Jquery

 <div class="page-header cf">
        <h2 class="students">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>
</ul>
</div>

Answer 1

使用$.each()或forEach迭代数组。

var array = [1, 2, 3];

$.each(array, function(index, value) {
    console.log(index, value);
});

array.forEach(function(value) {
    console.log(value);
});

正如jQuery文档所述：

$ .each（）函数与$（selector）.each（）不同，后者用于独占于jQuery对象进行迭代。 $ .each（）函数可用于迭代任何集合，无论它是对象还是数组。

每个都不是JQuery中的函数错误

1 个答案: