2017-01-19 53 views
1

有沒有辦法檢查最後添加的div?檢查最新的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> \ 
      '; 
     } 

    } 
}) 
+0

顯示一些你已經嘗試過的代碼。 –

+0

你還沒有顯示任何代碼,所以很難給你一個明確的答案,但你可以使用':last'選擇器來查找父代中包含的最後一個元素,例如'$('#chat-messages .message:最後')'。我建議你閱讀文檔,看看你可以用這個元素做什麼:http://api.jquery.com –

+0

這裏是添加一條新消息@AtaurRahmanMunna的代碼現在我想檢查最後一個面板標題文本檢查最後一條消息是來自我還是其他人 –

回答

1

您可以通過使用jquery

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>
見最後追加與消息的div元素 jsFiddle也。

-1

https://api.jquery.com/last-selector/ 閱讀本。 您可以使用$( 「分區:最後一個」)

$("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>

+0

我可以通過該功能獲取該div的所有信息嗎?像面板標題文本 –

+0

@BharatPatidar你見過什麼聊天應用程序,消息被添加到聊天記錄的中間位置? –

+0

我想讓它看起來像我自己的whatsapp網頁 –