Javascript $。每个都只遍历数组中的最后一项…为什么会发生这种情况？

我试图从数据库中获取一个数组，然后将该数组中的特定项作为目标，将其放入一些HTML中，并在浏览器中呈现。在我的代码中，

警报（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");
        })
    })
});

$（函数（）{
$（'.commentsInit'）。单击（函数（）{
var uniCommID=$（this.attr（“value”）；
$.ajax({
键入：“获取”，
url:“/api/comments”
}).成功（功能（用户）{
$。每个（用户、功能（i、v）{
警报（v.displayName）；
变量b=''+
'' +
'' +
i+“：”+v.username+
'' +
'' +
“你好”+
'' +
'' +
“45分”+
'' +
'' +
'';
$（'.commentsForTheWin'）.html（b）；
});
$（'.hideOnLoad:contains（'+uniCommID+'））.toggle（“slow”）；
})
})
});

我猜它不喜欢我把它放在.html？但是，文本也不会改变它。感谢您的帮助

改用

append（）

：

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

.html（）

覆盖选择器元素中的所有内容

在循环中创建html并在获取所有内容时将其放入循环中的更好方法：

var b=''；
$。每个（用户、功能（i、v）{
b+=''+
'' +
'' +
i+“：”+v.username+
'' +
'' +
“你好”+
'' +
'' +
“45分”+
'' +
'' +
'';
});
$（'.commentsForTheWin'）.html（b）；

改用

append（）

：

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

.html（）

覆盖选择器元素中的所有内容

在循环中创建html并在获取所有内容时将其放入循环中的更好方法：

var b=''；
$。每个（用户、功能（i、v）{
b+=''+
'' +
'' +
i+“：”+v.username+
'' +
'' +
“你好”+
'' +
'' +
“45分”+
'' +
'' +
'';
});
$（'.commentsForTheWin'）.html（b）；

当

.html（）

覆盖现有内容时，问题就出现了，因此您在上一次迭代中添加了内容

您需要使用而不是

.html（）

，并删除现有内容

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

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

---

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

.HTML（）

---

当

.html（）

覆盖现有内容时，问题就出现了，因此您将在上一次迭代中获得添加的内容

您需要使用而不是

.html（）

，并删除现有内容

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

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

---

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

.HTML（）

---

使用

.append（）

而不是

.html（）

，因为通过

.html（）

在每次迭代中，您都会覆盖

注释中的现有内容。
使用
.append（）
而不是
.html（）
，因为通过
.html（）
在每次迭代中，您都会覆盖
comments for twin
元素中的现有内容。
您能否向我们展示一个“用户”示例，您需要追加数据，而不是每次
$都简单地覆盖HTML。each（）
称为DHTML（），它将覆盖现有的详细信息。使用append（）您可以向我们展示一个“用户”示例吗？您需要追加数据，而不是每次
$都简单地覆盖HTML。每个（）被称为
，将覆盖现有的详细信息。使用append（），他也可以使用html（），但他必须将b变量初始化为字符串，然后使用+运算符连接每个$。每次迭代，在这里写下这个，就是为了有一个完整的响应范围。这修复了所有问题！非常感谢。我会在4分钟后接受答案。他也可以使用html（），但他必须将b变量初始化为字符串，然后使用+运算符连接每个$。每次迭代，在这里写下这个，这样就有了完整的响应。这修复了所有问题！非常感谢。4分钟后我会接受答案