javascript - 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-large 的前面。这很好，因为您可能希望第一个图标成为大项目上的第一个图标!但是，在第二次循环期间，第二个图标将添加到 #items-large 的前面(前置)。啊!现在第一个图标实际上是最后一个，第二个图标是第一个!对所有图标重复此操作，最后，数组中的最后一个图标位于前面或第一个，数组中的第一个图标位于后面或最后一个。

并且根据 #items-large 中的其他内容，您可能也不想使用追加。

想象一下以下情况:

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

追加仍然会导致图标顺序不正确!

您足够聪明，知道从这里该做什么，但如果您需要解决方案:

You could reverse your icons in the array by hand, or you could call reverse() on your array before you begin prepending them.