Question

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

我尝试添加.css（＆＃39;位置＆＃39;，＆＃39;右＆＃39;）和位置=＆＃34;右＆＃34;什么时候调用div。

到目前为止，就我的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>

Answer 1

＆＃34;右＆＃34;不是＆＃34; position＆＃34;的有效值。有关有效值的列表，请参阅here。

因为您正在使用$(".message").append("...");所有的邮件对象都会被添加到您使用类＆＃34; message＆＃34;的单个列表项中。如果您有多个列表项，其中包含＆＃34; message＆＃34;你最终会得到重复的结果。我认为你的意思是为每条消息创建一个新的列表项，所以我已经相应地编写了下面的代码片段。

您要使用的是float属性，该元素将元素移动到父元素的右侧或左侧。在这种情况下，您需要将其与clear属性结合使用，否则这些项目将显示在同一行中。

如果要向元素添加类，而不是使用.css()，则应使用.addClass()，否则您将覆盖任何其他类。

＆＃13;

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" : ""));
});

＆＃13;

#messages {
  list-style: none;
}

.message {
  float: right;
  clear: both;
  background-color: #BEBCBC;
  border-radius: 5px;
  padding: 10px;
}

.message.sentMes {
  float: left;
  background-color: cornflowerblue;
}

＆＃13;

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

＆＃13;

基于ajax动态定位列表项

1 个答案: