基於ajax動態定位列表項

我試圖根據用戶或另一方是否發送消息來更改滾動條列表項的位置。但是，我有什麼將不會工作。基於ajax動態定位列表項

我試過在調用div時添加.css（'position'，'right'），並放置位置=「right」。

我已經走到這一步，是這樣的，只要我的AJAX來說：

success: function(data) 
    { 
     var messages = data['serverResponse']; 
     //alert(JSON.stringify(threads)); 
     $.each(messages, function(name, value) { 

      if(value.user === "1") 
      { 
       $(".message").append("<div class='" + name + "'>" + value.name + "</div>").css(".sentMes"); 
       $(".message").append("<div class='" + name + "'>" + value.message + "</div>"); 
       $(".message").append("<div class='" + name + "'>" + value.date + "</div>"); 
      } else 
      { 
       $(".message").append("<div class='" + name + "'>" + value.name + "</div>"); 
       $(".message").append("<div class='" + name + "'>" + value.message + "</div>"); 
       $(".message").append("<div class='" + name + "'>" + value.date + "</div>"); 
      } 
    });

以及用於在HTML：

<title>AMessage</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script type="text/javascript" src="JavaScript/ThreadsandMessages.js">  </script> 
    <link rel="stylesheet" type="text/css" href="AMessage.css"> 

</head> 
<body> 
    <header>header area</header> 
<nav> 
    <ul role="list"> 
     <li class="thread" role="listitem"></li> 
    </ul> 
    </nav> 

    <nav> 
    <ul role="list"> 
     <li class="message" role="listitem"></li> 
    </ul> 
    </nav> 
</body> 
</html>

來源

2016-04-17 Michael Gulik

「正確」是不是「位時的有效值」。有關有效值的列表，請參見here。

因爲您正在使用$(".message").append("...");所有的消息對象將被添加到您擁有類「消息」的單個列表項中。如果您有多個帶有「消息」類的列表項，則最終會得到重複的結果。我認爲你的意思是爲每條消息創建一個新的列表項，所以我已經寫下了相應的代碼片段。

你想要使用的是float屬性，它將元素移動到父元素的右側或左側。在這種情況下，您需要將其與clear屬性結合使用，否則這些項目將顯示在同一行上。

當你想添加一個類到一個元素，而不是使用.css()你應該使用.addClass()或者你會覆蓋任何其他類。

var messages = [{ 
 
    user: "1", 
 
    name: "John", 
 
    message: "Hi there", 
 
    date: "01/01/2016" 
 
}, { 
 
    user: "2", 
 
    name: "Tim", 
 
    message: "Hey what's going on?", 
 
    date: "01/01/2016" 
 
}, { 
 
    user: "1", 
 
    name: "John", 
 
    message: "Not much", 
 
    date: "01/01/2016" 
 
}]; 
 

 
$.each(messages, function(name, value) { 
 
    var message = 
 
    "<li class='message' role='listitem'>" + 
 
     "<div>" + value.name + "</div>" + 
 
     "<div>" + value.message + "</div>" + 
 
     "<div>" + value.date + "</div>" + 
 
    "</li>"; 
 

 
    $("#messages").append($(message).addClass(value.user === "1" ? "sentMes" : "")); 
 
});

#messages { 
 
    list-style: none; 
 
} 
 

 
.message { 
 
    float: right; 
 
    clear: both; 
 
    background-color: #BEBCBC; 
 
    border-radius: 5px; 
 
    padding: 10px; 
 
} 
 

 
.message.sentMes { 
 
    float: left; 
 
    background-color: cornflowerblue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<header>header area</header> 
 
<nav> 
 
    <ul role="list"> 
 
    <li class="thread" role="listitem"></li> 
 
    </ul> 
 
</nav> 
 

 
<nav> 
 
    <ul role="list" id="messages"> 
 
    </ul> 
 
</nav>

來源

2016-04-17 23:39:22 Jaydo

完美。謝謝，非常感謝！ –

基於ajax動態定位列表項

回答

相關問題