Question

我遇到这个问题，Jquery .prepend正常工作，除了数组中的第一个元素始终保持在页面顶部。基本上我想循环存储在数组中的一堆对象，其中最新的对象存储在最后，我希望最新的对象位于页面的最顶层。

我现在在javascript中有这个：

function post(descript, title, username, id){

  this.descript = descript,
  this.title = title,
  this.username = username,
  this.id = id

  $("#descript").html(descript);
  $("#title").html(title);
  $("#username").html(username);
  $post = $("#template").clone();
  $post.attr("id", id);
  $(".feed_div").prepend($post);
  $post.fadeIn();
};

var data = [oldest, older, old, new, newer, newest];
for (i in data) {
    var obj = data[i];
    new post(obj.text, obj.title, obj.username, obj.id);
};

然后在html中，它看起来像：

<div class="feed_div">
  <div class = "post" id="template" style="display:none">
    <h2>
      <span id="title"></span>
      <span id="username"></span>
    </h2>
    <p id="descript"></p>
  </div>
</div>

所有内容都显示我想要的内容，但无论我做什么，数组中的第一个元素始终保持在顶部。因此页面总是有以下订单：

最古老的，最新，较新的，新，旧，较旧的

有人可以解决这个问题吗？

这是一个可编辑的jsfiddle的链接，这样你就可以看到发生了什么：

https://jsfiddle.net/azgmqdo4/

Answer 1

我不完全确定你为什么会得到你得到的结果，但很可能是因为你使用了重复的ID。

正如我在评论中提到的（以及一些其他建议）：

不要使用重复的ID
如果您实际上没有构建任何内容，请不要使用new
不要使用构造函数作为修改DOM的副作用
不要使用for..in迭代数组
在克隆之后修改项目，而不是

之前
除非您确实要显示某些HTML
，否则请勿使用.html()

修复这些问题后，它似乎按预期工作：

function addPost(descript, title, username, id) { $post = $("#template").clone(); $post.attr("id", id); $post.find(".descript").text(descript); $post.find(".title").text(title); $post.find(".username").text(username); $(".feed_div").prepend($post); $post.fadeIn(); } //creating objects var oldest = { title: "oldest", text: "blah", username: "blah2", id: 1 }; var older = { title: "older", text: "blah", username: "blah2", id: 2 }; var old = { title: "old", text: "blah", username: "blah2", id: 3 }; var new1 = { title: "new", text: "blah", username: "blah2", id: 4 }; var newer = { title: "newer", text: "blah", username: "blah2", id: 5 }; var newest = { title: "newest", text: "blah", username: "blah2", id: 6 }; var data = [oldest, older, old, new1, newer, newest]; data.forEach(function (obj) { addPost(obj.text, obj.title, obj.username, obj.id); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <body> <div class="feed_div"> <div class="post" id="template" style="display:none"> <h2> <span class="title"></span> <span class="username"></span> </h2> <p class="descript"></p> </div> </div> </body>

Jquery .prepend（）将一个元素保留在顶部

1 个答案: