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("...");を使用しているため、すべてのメッセージオブジェクトが、クラス「メッセージ」の1つのリストアイテムに追加されます。クラス "メッセージ"を持つ複数のリストアイテムがある場合、結果は重複してしまいます。私は各メッセージのために新しいリストアイテムを作成することを意味すると思いますので、以下のコードスニペットを書きました。

要素を親要素の右または左に移動するプロパティは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に基づいてリスト項目を動的に配置

答えて

関連する問題