Более быстрый способ добавить элемент без поиска последнего элемента в каждом цикле
У меня есть массив строк, каждая из которых содержит панель начальной загрузки, которая возвращается из пост-вызова. Я хочу перебрать каждый из них и добавить их в конец элемента контейнера «eventContainer», но я ищу способ сделать это, не выполняя поиск в каждом цикле. Есть ли лучший / более быстрый способ сделать это, чем то, что я делаю?
К вашему сведению - внизу контейнера есть еще один элемент, который не является панелью.
Вот что я делаю
for (var i = 0; i < response.events.length; i++) {
$("#eventContainer").find(".panel").last().append(response.events[i]);
}и eventContainer, к которому я их добавляю, выглядит примерно так
<div id = "eventsContainer">
<div class = "panel panel-default"></div>
<div class = "panel panel-default"></div>
<div class = "panel panel-default"></div>
...append new panels here
<div id = "someotherelement"></div>
</div>что применяется?
Применяет массив (response.events) в качестве аргументов функции .append с контекстом box.
будет ли это работать, даже если у меня будет другой элемент в конце контейнера. Я повторно отправлю обновленный фрагмент.
Это нормально, потому что box - это просто последний .panel, как в вашем исходном коде.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Код, который у вас есть, будет работать, если вы просто сохраните последнюю панель в переменной и будете использовать ее при добавлении элементов. Вам придется изменить порядок:
var $lastPanel = $("#eventContainer").find(".panel").last();
for (var i = response.events.length - 1; i >= 0; i--) {
$lastPanel.append(response.events[i]);
}
Вот фрагмент кода, который я создал для добавления элементов к последнему брату: https://codebrace.com/editor/b013fb1cc
Вам нужно проверить insertAfter ()
insertAfter () используется для добавления новых элементов рядом с каждым братом и сестрой, В то время как append () обычно используется для добавления нового элемента (дочернего) к родительскому селектору.
если вы хотите добавить массив / объект событий к последнему родственнику, то вот фрагмент кода:
(для массива событий) https://codebrace.com/editor/b016bcb47
(для объекта события) https://codebrace.com/editor/b016cc929
так какой из них самый быстрый ??
Я обновил ответ. Что касается скорости, я создал здесь тестовый пример: codebrace.com/editor/b01919386
Таким образом, в первых двух выполнениях оба решения выполнялись со скоростью 2 мс. Но в третьем исполнении ваше решение было 3 мс, а мое - 1 мс.
var box = $("#eventContainer").find(".panel").last(); box.append.apply(box,response.events);должен это делать.