Question

我有一个对象数组，我从页面上抓取并显示图像，只显示一次，最后一个显示第一个，第一个是最后一个 - 向后显示。如果我使用.append（），那么它的顺序是正确的，但在语义上我需要使用.prepend（）以便我的html元素正确显示。关于发生了什么的任何建议？我无法在网上找到导致此问题的原因。描述此行为的doc的链接也很棒！

这里是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中的其他内容，您可能也不想使用append。

想象一下：

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

并且附加仍会导致图标的顺序错误！

你很聪明，可以从这里弄清楚该怎么做，但如果你需要一个解决方案：

您可以手动反转阵列中的图标，也可以在开始预先添加之前调用阵列上的reverse（）。

Answer 2

如果您选择继续递增循环，可以尝试递减循环或数组，而不是递增吗？

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);
};

jQuery .prepend颠倒了数组？

3 个答案: