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 не реверсирует массив. Во время первого цикла ваше первое умение добавляется к фронту ваших # предметов. Это хорошо, потому что вы, вероятно, хотите, чтобы первый был первым значком на элементах! Однако во втором цикле второй значок добавляется к фронту (добавочный) к # элементам. Ах! Теперь первый значок на самом деле является последним, а второй значок первым! Это повторяется для всех ваших значков и, в конце концов, ваш последний значок в массиве находится впереди или первый, а первый значок в массиве находится назад или последний.

И в зависимости от того, что еще находится в # элементах, вы также можете не использовать append.

Представьте себе следующее:

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