为什么迭代器 i 总是等于 4，我该如何解决这个问题？

Question

我正在尝试从我的数据库中加载 cmets 及其回复。

为此，我需要知道在哪些 cmets 之后需要添加哪些回复。

我尝试使用迭代器执行此操作，将 i 作为 id 分配给每个新评论，然后尝试将所有相应的回复添加到相关的"#"+i 遗憾的是，这不起作用，正如您在控制台的输出中看到的那样。日志：

ITERATOR: 1
ITERATOR: 2
ITERATOR: 3
ITERATOR: 4

ANSWER ITERATOR: 4
ANSWER ITERATOR: 4
ANSWER ITERATOR: 4
ANSWER ITERATOR: 4

所有回复都添加在 ID 为 4 的评论下。

这显然不是预期的。

这是什么原因造成的，我该如何解决？

（我使用insertAfter($("#"+i));添加回复）

---

var i = 0;
    var postKey = "<%= post.key %>";
    var commentsRef = firebase.database().ref("comments/"+postKey).orderByChild('commenttimestamp').limitToFirst(25);
    commentsRef.once("value", function(snapshot) {
        snapshot.forEach(function(childSnapshot){
            i++;
            console.log("ITERATOR: "+i);

                $("#commentsBox").prepend("<div class='fullComment' id='"+i+"'><a href='../../users/"+childSnapshot.val().author+"'><div class='userCommentBox'><div class='commentUsername'>"+childSnapshot.val().username+"</div><img class='userPic' src='https://storage.googleapis.com/gaminghub-upload/"+childSnapshot.val().profilepic+"' /></div></a><div class='comment'>"+childSnapshot.val().text+"</div><div><img data-post='"+postKey+"' data-comment='"+childSnapshot.key+"' data-author='"+ childSnapshot.val().author +"' class='commentCross' src='./../../public/assets/cross.png'><img class='replyIcon' data-comment='"+childSnapshot.key+"' data-author='"+ childSnapshot.val().author +"'  src='./../../public/assets/replyIcon.png'></div></div>");
                var that = $(this);
                var answersRef = firebase.database().ref("comments/"+postKey+"/"+childSnapshot.key+"/answers");
                answersRef.orderByChild("answertimestamp").once("value", function(answersSnapshot) {
                    answersSnapshot.forEach(function(answer) {
                        if (answer.val().profilepic == undefined || answer.val().profilepic == null || answer.val().profilepic == "") {
                            $("<div class='answer'><a href='../../users/"+answer.val().author+"'><div class='userCommentBox'><div class='commentUsername'>"+answer.val().username+"</div><img class='userPic' src='../../../public/assets/miniProfilePic.png' /></div></a><div class='comment'>"+answer.val().text+"</div><div><img class='answerCross' data-post='"+postKey+"' data-comment='"+childSnapshot.key+"' data-answer='"+answer.key+"' data-author='"+ childSnapshot.val().author +"' src='./../../public/assets/cross.png'></div></div>").insertAfter($("#"+i));
                        } else {
                            console.log("ANSWER ITERATOR: "+i);
                            $("<div class='answer'><div class='userCommentBox'><a href='../../users/"+answer.val().author+"'><div class='commentUsername'>"+answer.val().username+"</div><img class='userPic' src='https://storage.googleapis.com/gaminghub-upload/"+answer.val().profilepic+"' /></div></a><div class='comment'>"+answer.val().text+"</div><div><img class='answerCross' data-post='"+postKey+"' data-comment='"+childSnapshot.key+"' data-answer='"+answer.key+"' data-author='"+ childSnapshot.val().author +"'  src='./../../public/assets/cross.png'></div></div>").insertAfter($("#"+i));
                        }
                    });
                });
            }

Answer 1

这似乎与@wostex 指出的JavaScript closure inside loops – simple practical example 有关。一个决议是放在这条线下面

var that = $(this);

线

let j=i

然后用

附加 j 来回答迭代器

console.log("ANSWER ITERATOR: "+j);