jQuery .prepend перевернул массив?

#javascript #jquery

Вопрос:

У меня есть массив объектов, из которых я беру изображения и отображаю на странице, отображается только один раз, последний отображается первым, а первый — последним — назад. Если я использую .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);
};

1. .prepend() всегда будет вставлять аргумент как первый дочерний элемент родительского элемента. Я не понимаю, почему вы должны использовать .preprend() «семантически». .append() кажется, это именно то, что вам нужно: вы хотите добавить каждый элемент в массив к родительскому.

2. Спасибо. У вас была хорошая точка зрения. Я немного реорганизовал свой код в HTML, и теперь все хорошо. 🙂

Ответ №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() в своем массиве, прежде чем начинать добавлять их.

Ответ №2:

Вместо увеличения, не могли бы вы попробовать уменьшить свой цикл или массив. отменить его, если вы решите все еще увеличивать цикл?

Ответ №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);
};