使用AJAX将元素预先添加到ul - 修订版

Question

我有一个固定大小的div，里面有一个n元素的无序列表（<ul>）。

当用户向上滚动到该列表中的第一个元素时，AJAX请求将转到服务器以请求更多元素。服务器使用具有n行

的js进行响应

$('.entries').prepend('<li class="entry">some text</li>');

js成功地预先添加了元素，但它们彼此重叠，它们看起来与旧元素不同。

（为了更好地理解我正在尝试在facebook收件箱中做一些事情。）

当我检查代码时，所有li元素看起来都相同（只有不同​​的文本），它们都具有相同的css属性，但新的（在查看预览时）是相互重叠的。

HTML

<ul class="entries">
    <li class="entry"> some text </li>
    <li class="entry"> some text </li>
    <li class="entry"> some text </li>
    <li class="entry"> some text </li>
    <li class="entry"> some text </li>
    <li class="entry"> some text </li>
    <li class="entry"> some text </li>
</ul>

返回的js

<ul class="entries"> <li class="entry"> some text </li> <li class="entry"> some text </li> <li class="entry"> some text </li> <li class="entry"> some text </li> <li class="entry"> some text </li> <li class="entry"> some text </li> <li class="entry"> some text </li> </ul>

这是显示会发生什么的图片。

This is the fiddle that works，我在我的页面上有同样的事情，区别在于当用户滚动到顶部时执行的js是来自ajax请求的响应。

顺便说一下，在那个rails app中

$('.entries').prepend('<li class="entry"> some text </li>');

生成带有一些空格的文本（总量相同）（我试过entry.text.strip）

并且当相同的代码不在html视图中执行时，但是在js文件发送之前它没有空格

<%= render entry %>

_entry.html.erb

$('.entries').prepend('<li class="entry"><%= j render entry %></li>');

带有AJAX请求的

JS

<%= entry.text %>
<%= entry.date %>