Question

我正在尝试从我的数据库中获取一个数组，然后定位该数组中的特定项，将其放入一些HTML并在浏览器中呈现它。在我的代码中，alert(v.displayName)将遍历所有＆＃39; displayName＆＃39;在我的收藏中。但是，当我把它放入html元素时，它只打印出我的数组中的最后一项。如果我返回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);

Answer 2

改为使用append()：

 $('.commentsForTheWin').append(b);

.html()会覆盖selector元素中的所有内容。

更好的方法来创建你的html循环并在你得到所有内容时把它们放在里面：

var b='';
$.each(users, function(i, v) {
  b += '<div class="red">' +
    '<div>' +
    '<span>' +
    i + " : " + v.username +
    '</span>' +
    '<span>' +
    " hello" +
    '</span>' +
    '<span>' +
    "45 pts" +
    '</span>' +
    '</div>' +
    '</div>';
});
$('.commentsForTheWin').html(b);

Answer 3

使用.append()代替.html()，因为在每个代码中.html()覆盖commentsForTheWin元素中的现有内容。

$ .each只迭代我的数组中的最后一项...为什么会发生这种情况？

3 个答案: