Javascript 基于ajax的列表项动态定位_Javascript_Jquery_Html_Css_Ajax

Javascript 基于ajax的列表项动态定位

javascript jquery html css ajax

Javascript 基于ajax的列表项动态定位,javascript,jquery,html,css,ajax,Javascript,Jquery,Html,Css,Ajax,我正在尝试根据消息是否由用户或其他方发送来更改可滚动列表项的位置。然而，我所拥有的不会起作用我尝试添加.css（'position'，'right'））并在调用div时放置position=“right” 到目前为止，就我的ajax而言，我得到的是： success: function(data) { var messages = data['serverResponse']; //alert(JSON.stringify(threads));

我正在尝试根据消息是否由用户或其他方发送来更改可滚动列表项的位置。然而，我所拥有的不会起作用

我尝试添加.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>");
            }
     });

成功：函数（数据）
{
var messages=data['serverResponse']；
//警报（JSON.stringify（threads））；
$.each（消息、函数（名称、值）{
如果（value.user==“1”）
{
$（“.message”）.append（“+value.name+”）.css（“.sentMes”）；
$（“.message”）.append（“+value.message+”）；
$（“.message”）.append（“+value.date+”）；
}否则
{
$（“.message”）.append（“+value.name+”）；
$（“.message”）.append（“+value.message+”）；
$（“.message”）.append（“+value.date+”）；
}
});

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

a消息
收割台区域

“right”不是“position”的有效值。有关有效值的列表，请参阅

因为您使用的是

$（“.message”）.append（“…”）；

您的所有消息对象都将被添加到类为“message”的单个列表项中。如果您有多个类为“message”的列表项您将得到重复的结果。我猜您的意思是为每条消息创建一个新的列表项，因此我相应地编写了下面的代码段

您要使用的是将元素移动到父元素右侧或左侧的属性。在这种情况下，您需要将其与

clear

属性组合，否则项目将显示在同一行上

当您想向元素添加类时，不应使用

.css（）

，而应使用

.addClass（）

，否则将覆盖任何其他类

var消息=[{
用户：“1”，
姓名：“约翰”，
留言：“你好”，
日期：“2016年1月1日”
}, {
用户：“2”，
姓名：“蒂姆”，
留言：“嘿，发生了什么事？”，
日期：“2016年1月1日”
}, {
用户：“1”，
姓名：“约翰”，
信息：“不多”，
日期：“2016年1月1日”
}];
$.each（消息、函数（名称、值）{
var消息=
“”+
“”+value.name+“”+
“”+value.message+“”+
“”+value.date+“”+
“”；
$（“#消息”）.append（$（消息）.addClass（value.user==“1”？sentMes:“）；
})；

#消息{
列表样式：无；
}
.留言{
浮动：对；
明确：两者皆有；
背景色：#BEBCBC；
边界半径：5px；
填充：10px；
}
.message.sentMes{
浮动：左；
背景颜色：矢车菊蓝；
}


收割台区域

太好了。非常感谢您！