jquery - 疑难的Jquery <div> 问题，求高手指教

Question

大家好，我有一个奇怪的问题。我有一个 jquery 脚本，它基本上按照降序时间顺序将来自 php 脚本中数据的消息一条一条地添加到前面，以便最新消息位于顶部。我想做的是以某种方式在两条或更多条消息发出时将一个 div 容器放在它们周围，所以我决定检查哪条消息是最旧的，并在该消息前加上一个标签，在最新的消息前加上标签，因为每条消息都会发出一个一个。然而，这并没有奏效，因为 div 似乎没有检测到外壳，并且只部分地包含了 2 个测试消息(只包含了第一个)。如果有人对如何实现这一点有任何建议，我很乐意听取他们的意见。

     function prepare(response) {
          count++;

//function in another doc
nicetime = handleDate(response.timestamp);

if (response.replydiv=='start'){
    var list_name='<div id="chunk">start';
}
else{
    var list_name='';
}
  if (response.creator!==''){
        var list_name=list_name+'<li class="message-list-creator" id="list-'+count+'">'
    }
    else{
        var list_name=list_name+'<li class="message-list" id="list-'+count+'">'
    }




            var string = ''+list_name+''

              + '<span class="message-list-nick"><a href="statistics.php?user='+response.user+'">'+response.user+'</a></span>'
              + ' <span class="date" id='+response.timestamp+'>'+nicetime+'</span><br>'
              + '<span class="msg">'+response.message+'</span>'
              + '<span class="clear"></span>'
              if(response.reply!='null'){
               var string = string +'<a message_id="'+response.reply_chunk_id+'" id="reply">reply</a></li>';
              }
              else {
                 var string=string+'</li>';
              }


              if (response.replydiv=='end'){
            var string=string +'</div>end';
        }

          return string;
        }

$.getJSON(files+"message.php?action=view&load=initial&topic_id="+topic_id+"&username="+username+"&t=" + (new Date()), function(json) {  
            if(json.length) {
              for(i=0; i < json.length; i++) {
                  json.sort(function(a,b) { return parseFloat(a.timestamp) - parseFloat(b.timestamp) } );
                $('#message-list').prepend(prepare(json[i]));
                $('#list-' + count).fadeIn(1500);
              }

            }

          });

Answer 1

你有一个杂散的(和无与伦比的)</li>在这部分可能会丢掉你的标记:

+'</li>';

还有当您调用 .prepend() 时第一个未关闭<div>你会遇到问题......它不仅仅是添加 HTML 它正在制作 DOM 元素，所以你需要将整个 HTML 字符串放在一起然后 .prepend() 一次。

你可以进一步优化它，但基本的固定版本应该是这样的:

function prepare(response) {
  count++;
  //function in another doc
  var nicetime = handleDate(response.timestamp), string="";

  if (response.div=='start'){
    string = '<div id="chunk">start div';
  }

  string += list_name;
  string += '<span class="message-list-nick">'+response.message+'</span>';

  if (response.div=='end'){
   string += '</div>end div';
  }
  return string;
}

以及 ajax 调用:

$.getJSON(files+"script.php?action=view&load=initial&topic_id="+topic_id+"&username="+username+"&t=" + (new Date()), function(json) { 
  var output = "";
  for(i=0; i < json.length; i++) {
    json.sort(function(a,b) { return parseFloat(a.timestamp) - parseFloat(b.timestamp) } );

     output += prepare(json[i]);
     $('#list-' + count).fadeIn(1500);
  }
  $('#messagelist').prepend(output);
});

这里的重要区别是我们不会追加到 DOM 直到字符串完成...jQuery 将在调用 .prepend() 时立即(或尝试)完成元素。第一次。