检查最新的 div答案

【问题标题】：Check latest div检查最新的 div
【发布时间】：2017-01-19 07:44:15
【问题描述】：

有没有办法检查最后添加的 div？

我想知道这一点，因为我正在使用 socket.io 和 bootstrap 制作一个聊天应用程序。

我是使用 javascript 和 jquery 的新手。如果我发送了一条消息，并且最新消息也来自我，我希望我的文本附加到我正在使用的面板上。

像这样：example

希望有人知道。

提前致谢！

代码：

socket.on('newmsg', function (data) {
    if (user) {
        if (data.user == user) {
            document.getElementById('message-container').innerHTML += '\
            <div class="row">\
                <div class="col-lg-1"></div>\
                <div class="col-lg-5">\
                    <div class="panel panel-success">\
                        <div class="panel-heading">'+data.user+'</div>\
                        <div class="panel-body">\
                            <div class="row">\
                                <div class="col-lg-10">\
                                    '+data.message+'\
                                </div>\
                                <div class="col-lg-2">\
                                    '+data.time+'\
                                </div>\
                             </div>\
                        </div>\
                    </div>\
                </div>\
            </div> \
            ';
        }
        else {
            document.getElementById('message-container').innerHTML += '\
            <div class="row">\
                <div class="col-lg-6"></div>\
                <div class="col-lg-5">\
                    <div class="panel panel-primary">\
                        <div class="panel-heading">'+data.user+'</div>\
                        <div class="panel-body">\
                            <div class="row">\
                                <div class="col-lg-10">\
                                    '+data.message+'\
                                </div>\
                                <div class="col-lg-2">\
                                    '+data.time+'\
                                </div>\
                             </div>\
                        </div>\
                    </div>\
                </div>\
            </div> \
            ';
        }

    }
})

【问题讨论】：

显示一些你尝试过的代码。
您没有显示任何代码，因此很难给您一个明确的答案，但是您可以使用:last 选择器来查找包含在父元素中的最终元素，例如$('#chat-messages .message:last')。我建议您阅读文档以了解您可以使用该元素做什么：api.jquery.com
这是添加新消息的代码@AtaurRahmanMunna 现在我想检查最后一个面板标题文本以检查最后一条消息是来自我还是其他人

标签： javascript jquery socket.io

【解决方案1】：

您可以使用jquery最后在您的 div 元素中添加消息

var addedText = '<div> this is second message</div>';
$('#msgGroup > div').last().append(addedText);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="msgGroup">
    <div>this is first msg</div>
</div>

另请参阅jsFiddle。

【讨论】：

嗨，希望你一切都好。你能看看这个问题吗？ stackoverflow.com/questions/65682609/…

【解决方案2】：

https://api.jquery.com/last-selector/ 读这个。你可以使用 $("div:last")

    $("div.panel-body div.row:last").css("color","red")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <html>
    <div class="panel-body">
    <div class="row">First row</div>
    <div class="row">Second row</div>
    </div>
    </html>

【讨论】：

我也可以使用该功能获取该 div 的所有信息吗？喜欢面板标题文本
@BharatPatidar 你见过哪个聊天应用程序将消息添加到聊天日志的中间？
我想让它看起来像我自己的whatsapp web