Question

我有一个简单的消息系统（比如在Facebook上），其中包含New条消息，还有Replies消息。 HTML非常简单：

<div id="messages">
<ol class="new-messages">
     <li id="message45"><p>A new message</p>
       <ol class="replies-messages">
         <li><p>A reply to the message</p></li>
       </ol>
     </li>
    <li id="message46"><p>Another new message</p>
     </li>
</ol>
</div>

当发布新消息时，它由AJAX完成到服务器。然后服务器将返回一些这样的JSON：

{"Message":[{"MessageBody":"<p>A message here</p>", "InReplyToMessageID":"45"}]}

所以考虑到上面的JSON，似乎要添加到DOM的新消息实际上是对消息45的回复。我知道在我的HTML中有一个id为message45的列表项，所以我希望将此新消息添加到<ol class="replies-messages">有序列表中，该列表嵌套在<li id="message45">列表项中。

如果InReplyToMessageID值为空，则为新消息，而应将其添加到<ol class="new-messages">有序列表中。

这甚至可以使用JQuery吗？我担心逻辑是如此复杂，我应该尝试不同的技术，但我不确定什么适合这项任务。到目前为止，我似乎只能附加到其中一个列表中：

$.ajax({
                type: 'post',
                url: '/messageurl',
                data: $("form").serializeArray(),
                dataType: "json"
            }).done(function (result) {

            $.each(result.Message, function (index, value) {
           $("#messages > ol").prepend('<li>' + value.MessageBody + '</li>');               
});

                }).fail(function () {
                    alert("Please try again.");
                });

Answer 1

不，这是jQuery的小巷。这样的事情应该有效：

var target;

if (msg.InReplyToMessageId == "") {
  target = $('.new_messages');
} else {
  target = $('li#message' + msg.InReplyToMessageId).find('.replies-messages');
}

var newMessage = $('<li>');
newMessage.html(msg.MessageBody);
newMessage.attr('id', /* ... */);
target.prepend(newMessage);

如何告诉JQuery在哪里放置新内容

1 个答案: