javascript - $.each 只是遍历我数组中的最后一项......为什么会这样？

Question

我试图从我的数据库中获取一个数组，然后将该数组中的特定项目作为目标，将其放入一些 HTML 中并让它在浏览器中呈现。在我的代码中，alert(v.displayName) 将遍历我集合中的所有“displayName”。但是，当我将它放入 html 元素时，它只打印出数组中的最后一项。如果我输入 return false $('.commentsForTheWin') 那么它只会打印出数组中的第一项。

$(function() {
    $('.commentsInit').click(function() {
        var uniCommID = $(this).attr("value");
        $.ajax({
            type: "GET",
            url: "/api/comments"
        }).success(function(users) {
            $.each(users, function(i, v) {
                alert(v.displayName);
                var b = '<div class="red">' +
                    '<div>' +
                    '<span>' +
                    i + " : " + v.username +
                    '</span>' +
                    '<span>' +
                    " hello" +
                    '</span>' +
                    '<span>' +
                    "45 pts" +
                    '</span>' +
                    '</div>' +
                    '</div>';
                $('.commentsForTheWin').html(b);
            });
            $('.hideOnLoad:contains(' + uniCommID + ')').toggle("slow");
        })
    })
});

我猜它不喜欢我把它放在 .html 中？但是 .text 也不会改变它。任何帮助表示赞赏!

Answer 1

问题出现是因为 .html() 覆盖了现有内容，因此您将获得上次迭代添加的内容。

您需要使用 .append()而不是 .html() 和 empty()删除现有内容。

//Remove the content before iteration
$('.commentsForTheWin').empty();

$.each(users, function (i, v) {
    ...
    //append new content
    $('.commentsForTheWin').append(b);
});

---

另一种方法是创建一个完整的 HTML 字符串，然后使用 .html()

var htmlContent = '';
$.each(users, function (i, v) {
    ...
    //append new content
    htmlContent += b;

});
$('.commentsForTheWin').html(b);