我正在尝试根据消息是由用户还是另一方发送来更改可滚动列表项的位置。但是，我所拥有的将不起作用。
我尝试添加 .css('position', 'right') 并在调用 div 时放入 position="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>
最佳答案
“right”不是“position”的有效值。参见 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>关于javascript - 基于ajax动态定位列表项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36682940/