Question

有没有办法检查最后添加的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> \
            ';
        }

    }
})

Answer 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。

Answer 2

https://api.jquery.com/last-selector/ 读这个。您可以使用$（＆＃34; div：last＆＃34;）

＆＃13;

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

＆＃13;

<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>

＆＃13;

检查最新的div

2 个答案: