jQuery .prepend颠倒了数组？

我有一个对象数组，我从页面上抓取图像并显示，只显示一次，最后一个显示第一个，第一个显示最后一个 - 向后。如果我使用.append（），那么它的顺序是正确的，但是在语义上我需要使用.prepend（），这样我的html元素才能正确显示。有什么建议吗？我无法在网上找到任何关于造成这种情况的信息。指向文档描述此行为的链接也将非常棒！jQuery .prepend颠倒了数组？

这里是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); 
};

来源

2016-10-03 Varvara Jones

'.prepend（）'将始终插入参数作为父项的第一个子项。我不明白为什么你必须使用'.preprend（）'“语义”。 '.append（）'似乎正是你所需要的：你想*追加数组中的每个元素到父项。 –

谢谢。你有一个好点。我在HTML中重新组织了我的代码，现在一切都很好。 :) –

Prepend不颠倒数组。在第一个循环中，你的第一个技能被添加到你的＃项目的前面 - 大。这很好，因为你可能希望第一个成为项目中的第一个图标 - 很大！但是，在第二个循环中，第二个图标被添加到前面（前置）到＃items-large。啊!现在第一个图标实际上是最后一个，第二个图标是第一个！这对所有图标都是重复的，最后，数组中的最后一个图标位于前面或第一个图标，而数组中的第一个图标位于后面或最后一个。

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

想象一下以下内容：

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

和追加仍将导致的图标相同的顺序不正确！

你足够聪明，找出从这里做的，但如果你需要一个解决方案：

您可以通过手扭转你的图标在阵列中，或者你可以叫反向（）上你的数组开始预先添加它们。

来源

2016-10-03 22:04:13

想通了，但感谢解释如何添加项目！这真的很有帮助。我需要不断了解对象的上下文！ –

而不是递增你可以尝试递减的循环或array.reversing，如果你选择还是递增循环？

来源

2016-10-03 21:53:04 alanmbarr

您可以使用.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); 
};

来源

2016-10-03 21:56:31

使用.reverse（）方法会给出“不是函数”的错误。 –

'items'是一个数组吗？或者它应该是'技能'也许？ –

jQuery .prepend颠倒了数组？

回答

相关问题