jQuery .prepend逆转了数组？

Question

我有一个对象数组，从页面中获取图像并显示在页面上，只显示一次，最后一个是首先显示的，第一个是最后一个向后显示的。如果我使用.append()，那么它的顺序是正确的，但在语义上，我需要使用.prepend()，这样我的html元素才能正确显示。对发生了什么有什么建议吗？我无法在网上找到导致这种情况的任何原因。一个指向描述这种行为的文档的链接也会很棒！

以下是jQuery代码：

for (var i = 0; i < skills.length; i++) {
    var icon = '<img id="' + items[i].id + '" class="item-img-lg" data-toggle="modal" data-index="'+ i +'"src="' + items[i].iconurl + '" />';
    $('#items-large').prepend(icon);
};

Answer 1

Prepend没有倒转数组。在第一个循环中，您的第一个技能被添加到#items的前面-大。这是好的，因为你可能希望第一个项目的第一个图标-大！然而，在第二个循环中，第二个图标被添加到前面(前置)到#items大。阿!现在第一个图标实际上是最后一个图标，第二个图标是第一个图标！这重复了所有的图标，最后，数组中的最后一个图标在前面，或者是第一个，数组中的第一个图标在后面，或者在最后。

根据#items中的其他内容--很大--您可能也不想使用附加项。

设想以下情况：

<div id="items-large">
<!-- prepended icons go here -->
    <h1>My awesome icons</h1>
<!-- appended icons go here -->
</div>

附加仍然会导致相同的不正确的顺序图标！

你很聪明，可以从这里找出该做什么，但如果你需要一个解决方案：

您可以手动反转数组中的图标，也可以在开始预置图标之前对数组调用反向()。

Answer 2

如果您仍然选择增加循环，那么可以尝试减少循环或array.reversing循环，而不是增量吗？

Answer 3

您可以使用.reverse()方法“反转”数组中的元素。

然后使用.append()。

// Reverse the array order
items = items.reverse();

for (var i = 0; i < skills.length; i++) {
    var icon = '<img id="' + items[i].id + '" class="item-img-lg" data-toggle="modal" data-index="'+ i +'"src="' + items[i].iconurl + '" />';
    $('#items-large').append(icon);
};