Javascript 更改聊天框中每个消息的div背景色

我有一个公共聊天室，所有用户都可以在这里输入消息，其他人也可以看到这些消息。我有一种情况是，假设我在聊天框中键入一条消息，然后div的bg颜色变为红色，下一条消息则变为白色。此外，如果任何其他用户在公共聊天框中发送任何消息，并假设div的最后一个bg颜色为白色，那么所有人都会看到它为红色。简言之，我需要更改div的bg颜色，使其与该公共聊天框中任何用户发送的每条消息一致。结果应该类似于附带的屏幕截图。这可以通过时间戳来实现吗？如果是，怎么做

这是我的简单HTML div，由jQuery更新：

<div id="wrapper">
            <div class="bubble-container" ></div>
</div>

用户输入并在UI上显示的消息的JQuery代码。我正在使用WebSocket制作这个聊天应用程序

该函数的逻辑工作正常。但是我想你会感兴趣的部分是我设计div的方式。到目前为止，对于每条消息，这段代码都有一个白色的bg div。但是我需要另外更改它

function onMessage(evt) {
    var msgText = evt.data;
    var bubble = $('<div class="bubble-container"><span class="bubble"><div class="bubble-text"><p>' + msgText + '</p></div></div>');
    var bubbles = 1;
    var maxBubbles = 8;
    var server;
    //var bubble = text;
    $("#msgText").val("");

    $(".bubble-container:last")
        .after(bubble);

    if (bubbles >= maxBubbles) {
        var first = $(".bubble-container:first")
            .remove();
        bubbles--;
    }

    bubbles++;
    $('.bubble-container').show(250, function showNext() {
        if (!($(this).is(":visible"))) {
            bubbles++;
        }

        $(this).next(".bubble-container")
            .show(250, showNext);

        $("#wrapper").scrollTop(9999999);
    });

}

消息函数（evt）{
var msgText=evt.data；
var bubble=$（“”+msgText+”
”）；
var=1；
var=8；
var服务器；
//var-bubble=文本；
$（“#msgText”）.val（“”）；
$（“.bubble容器：最后一个”）
.之后（气泡）；
如果（气泡>=最大气泡）{
var first=$（“.bubble容器：first”）
.remove（）；
泡沫--；
}
气泡++；
$（'.bubble container'）.show（250，函数showNext（）{
如果（！（$（this）.is（“：visible”））{
气泡++；
}
$（this.next（“.bubble container”）
。show（250，showNext）；
$（#包装器”）.scrollTop（999999）；
});
}

使用CSS：

。气泡容器：第n个子容器（偶数）{
背景：红色；
}

msg#1

味精#2

味精#3

味精#4

味精#5

msg#6

使用CSS：

。气泡容器：第n个子容器（偶数）{
背景：红色；
}

msg#1

味精#2

味精#3

味精#4

味精#5

msg#6

请为聊天室或您拥有的东西发布一些代码tried@CodingEnthusiast我添加了一些代码，但它不是它的工作方式，因为它显示在我附加的屏幕截图。但是这就是我想要它工作的方式。请为聊天室或你有的东西发布一些代码tried@CodingEnthusiast我添加了一些代码，但它不是它的工作方式，因为它显示在我附加的屏幕截图。但这正是我希望它发挥作用的方式。

function onMessage(evt) {
    var msgText = evt.data;
    var bubble = $('<div class="bubble-container"><span class="bubble"><div class="bubble-text"><p>' + msgText + '</p></div></div>');
    var bubbles = 1;
    var maxBubbles = 8;
    var server;
    //var bubble = text;
    $("#msgText").val("");

    $(".bubble-container:last")
        .after(bubble);

    if (bubbles >= maxBubbles) {
        var first = $(".bubble-container:first")
            .remove();
        bubbles--;
    }

    bubbles++;
    $('.bubble-container').show(250, function showNext() {
        if (!($(this).is(":visible"))) {
            bubbles++;
        }

        $(this).next(".bubble-container")
            .show(250, showNext);

        $("#wrapper").scrollTop(9999999);
    });

}