0

我有一个固定大小的 div，在里面我有一个<ul>由 n 个元素组成的无序列表 ( )。

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

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

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

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

这是显示发生了什么的图片。在此处输入图像描述

这是可行的小提琴，与我在页面上的内容相同，不同之处在于当用户滚动到顶部时在此处执行的 js 是来自 ajax 请求的响应。

顺便说一句，在那个rails应用程序中

<%= render entry %>

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

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

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

_entry.html.erb

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

带有 AJAX 请求的 JS

$(document).ready(function() {
  $(".entries").scrollTop($(".entries")[0].scrollHeight);
  return $(".entries").scroll(function() {
    var top;
    top = $(".entries").scrollTop();
    if (top < 0.05) {
      return $.getScript($('.pagination .next_page').attr('href'));
    }
  });
});
4

0 回答 0