Javascript 消息应用程序：跨越添加而不是创建新行

如何逐个对齐每个跨度。正如您所看到的，我的消息以紫色分组，而另一个人的消息以灰色分组。它们不是按顺序显示的

看起来，这些跨距按照css类不断增加。我不确定解决这个问题的最佳方法。请参阅下面我的代码：

    <div class="chat-window">
      <%  messagesArray.forEach(function(sentMessage){  %>
      <%   if (sentMessage.message.length != 0){        %>

      <span class="chat-message"><%= sentMessage.message %></span>

      <%     }    %>
      <%    });   %>

      <%  messagesArray.forEach(function(otherMessage){   %>
      <%   if (otherMessage.otherMessage.length != 0){    %>

      <span class="chat-message-other"><%= otherMessage.otherMessage %></span>

      <%     }  %>
      <%    }); %>
    </div>

---

在同一数据集上迭代两次。第一次显示发送的消息，第二次显示接收的消息

您应该只迭代一次，以相应地反映消息的顺序：

<div class="chat-window">
  <%  messagesArray.forEach(function(sentMessage){  %>
  <%   if (sentMessage.message.length != 0){        %>
            <span class="chat-message"><%= sentMessage.message %></span>
  <%     }    %>
  <%   if (otherMessage.otherMessage.length != 0){    %>
            <span class="chat-message-other"><%= otherMessage.otherMessage %></span>
  <%     }  %>
  <%    }); %>
</div>

<div class="chat-window">
  <%  messagesArray.forEach(function(sentMessage){  %>
  <%   if (sentMessage.message.length != 0){        %>
            <span class="chat-message"><%= sentMessage.message %></span>
  <%     }    %>
  <%   if (otherMessage.otherMessage.length != 0){    %>
            <span class="chat-message-other"><%= otherMessage.otherMessage %></span>
  <%     }  %>
  <%    }); %>
</div>