数据正确返回但不能正确显示返回的数据？答案

【问题标题】：Data returns correctly but won't display the returned data properly?数据正确返回但不能正确显示返回的数据？
【发布时间】：2019-11-22 06:47:13
【问题描述】：

所以我目前正在努力在 p 和 textarea 元素中查看返回的数据。

这是我正在使用的功能，您可以看到我正在从 cmets 节点接收每个键并获取评论标题和消息，并且可以正常工作...

function loadComments() {
    var comments =
        firebase.database().ref('/comments').once('value', function(snapshot) {
            snapshot.forEach(function(data) {
                var childData = data.val();
                var childKey = data.key;
                console.log(childData.title + " " + childData.message);
                Elements.commentTitle.text(childData.title);
                Elements.commentMessage.text(childData.message);

                var clonedNode = $('.listItems:last').clone();
                $(clonedNode).insertAfter('.listItems:last');
                $(clonedNode).css({
                    display: "block"
                });
            });
        });
}

但是，当我尝试查看这 2 个元素中的数据时，它只会显示来自第一个节点的标题和消息，并且会根据已发送的 cmets 的数量而重复。

例如，如果说有 5 个 cmets，都具有不同的数据，那么标题和消息是不同的。这就是你将看到的......

 Title
  Message

 Title
  Message

 Title
  Message

 Title
  Message

 Title
  Message

另外，以防万一，这是我正在使用的 html 代码....

<div class="container listItems text-left w-75 justify-content-center" style="display: none">
        <p class="titleBody"><strong></strong></p>
        <ul><p class="commentBody"></p></ul>
</div>

【问题讨论】：

<p> 是 <ul> 的无效子代
什么是Elements？同样就您的逻辑而言....您克隆了最后一个，但从不修改该克隆
所以你的console.log语句显示了正确的数据，但显示的元素不是？看来您只是在复制第一个元素而根本没有修改它。
@charlietfl Elements 是我的自定义对象，其中包含所有选定的元素，只是为了使代码更清晰，是的，我刚刚注意到了，谢谢。
@Eric Svitok 是的，这就是问题所在，但现在已经解决了。谢谢。

标签： javascript jquery firebase-realtime-database

【解决方案1】：

问题是您克隆了现有元素。您应该在元素被克隆后立即替换数据。

下面的代码解决了您抱怨的问题。

function loadComments() {
    var comments =
        firebase.database().ref('/comments').once('value', function(snapshot) {
            snapshot.forEach(function(data) {
                var childData = data.val();
                var childKey = data.key;

                var clonedNode = $('.listItems:first-child').clone();
                clonedNode.find('.titleBody:first-child > strong:first-child').text(childData.title);
                clonedNode.find('.commentBody:first-child').text(childData.message);
                clonedNode.insertAfter('.listItems:last-child');
                clonedNode.css({
                    display: "block"
                });
            });
        });
}

【讨论】：