Jquery .prepend() 在顶部保留一个元素答案

【问题标题】：Jquery .prepend() keeps one element at the topJquery .prepend() 在顶部保留一个元素
【发布时间】：2015-03-28 08:20:13
【问题描述】：

我在 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/

【问题讨论】：

你能发个jsfiddle吗
首先，您的 html 是无效的，因为您正在生成具有重复 ID 的元素。你会更好地使用类。你的意思是你的订单变成了newest, newer, new, old, older, oldest？
和@LShetty 我想我只是复制了我的结构错误，所以我编辑了 feed_div 的 id 部分。它工作正常，一切都完全按照它应该做的。唯一的问题是，在 for 循环遍历数组中的第一个对象之后，.prepend 函数将每个对象添加到页面上的第二个位置而不是第一个位置。所以，顺序很好，除了顺序是：最旧的，最新的，新的，旧的，旧的，最旧的。它将数组中的第一个对象固定在顶部，其他一切都很好
@jcbartlett25 jsfiddle.net 请为我们提供一个可重现的问题示例。您不应该使用 for..in 来遍历循环。订单无法保证。为什么你使用new 来调用一个函数并将值分配给你从不使用的this？
@jcbartlett25 您仍然有一个问题，即您通过 ID descript、title 等引用元素。并创建这些元素的副本。正如 LShetty 已经说过的，您不应该有多个具有相同 ID 的元素。

标签： javascript jquery html arrays prepend

【解决方案1】：

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

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

不要使用重复的 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>

【讨论】：