Как быстро удалить элементы из DOM и вернуть их по требованию?

0

Я хочу спросить, как иметь дело со многими элементами на странице, которые разбиты так:

<div id="tab1">
  ... hundreds of <div>'s
</div>
<div id="tab2">
  ... hundreds of <div>'s
</div>
etc...

Те сотни divs загружаются с использованием AJAX по требованию. Проблема в том, что есть больше вкладок, каждый из которых содержит большое количество элементов в DOM, что делает все операции медленнее и медленнее, так как больше вкладок загружается содержимым.

Есть ли простой способ временного удаления элементов из невидимых вкладок и возврата их по требованию при нажатии на какую-либо вкладку, чтобы быть видимым?

Конечно, я не хочу использовать $('#tab1.content').hide(); потому что он только сделает это содержимое вкладки невидимым, но контент останется в DOM.

Спасибо за любую помощь заранее.

EDIT: Я хочу повторно использовать ранее загруженный (кэшированный) контент. Поэтому повторных вызовов AJAX не потребуется для повторного открытия одной из ранее открытых вкладок.

  • 3
    Не загружайте все при загрузке страницы - только вкладки (возможно, отдельный вызов, чтобы выяснить, сколько вкладок вам нужно и их названия) - затем по щелчку - вызов AJAX для загрузки содержимого этой конкретной вкладки
  • 1
    Вы пробовали jquery .remove()
Показать ещё 2 комментария
Теги:
dom

2 ответа

1
Лучший ответ

Есть несколько решений, которые вы пытаетесь сделать.

Решение Omar работает, но у него есть откидные обратные - любые подключенные обработчики событий теряются. Делегированные обработчики событий могут справиться с ситуацией...

Другой вариант, более чистый Javascript, - это создать фрагмент документа, а затем переместить все элементы с вкладками в фрагмент, который нужно вернуть.

var tab1 = document.getElementById("tab1");
var frag1 = document.createDocumentFragment();
while (tab.firstChild) {
  frag1.appendChild(tab.firstChild);
}

// At this point, all the elements will be in 'frag' -- in reverse order.
// Not an issue -- just reverse the loop to put everything back.

РЕДАКТИРОВАТЬ

var tab1 = document.getElementById("tab1");
while (frag1.firstChild) {
  tab1.appendChild(frag1.firstChild);
}
  • 0
    Не могли бы вы обновить свой ответ с помощью фрагмента кода, как вернуть содержимое обратно? Большое спасибо.
0

Вы можете легко поместить его в jquery

tab1=$("#tab1").html();

Чтобы удалить его $("#tab1").html("");
для перезагрузки Снова $("#tab1").html(tab1)

Сообщество Overcoder
Наверх
Меню