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

Question

Как быстро удалить элементы из 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 не потребуется для повторного открытия одной из ранее открытых вкладок.

Frodik 28 апр. 2014, в 15:25

Источник

3

Не загружайте все при загрузке страницы - только вкладки (возможно, отдельный вызов, чтобы выяснить, сколько вкладок вам нужно и их названия) - затем по щелчку - вызов AJAX для загрузки содержимого этой конкретной вкладки
tymeJV 28 апр. 2014, в 13:16
1

Вы пробовали jquery .remove()
David Corbin 28 апр. 2014, в 13:17
1

Вы можете взглянуть, например, на angular.js или Backbone .
jukempff 28 апр. 2014, в 13:32
0

Смотрите мое редактирование. Я хочу использовать ранее загруженный контент. Поэтому никакие .remove() или повторные вызовы AJAX не соответствуют моим потребностям.
Frodik 29 апр. 2014, в 06:04

Показать ещё 2 комментария

Теги:

javascript

jquery

html

dom

2 ответа

0

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

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

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

Omar Sedki 28 апр. 2014, в 10:43

Ещё вопросы

Не загружайте все при загрузке страницы - только вкладки (возможно, отдельный вызов, чтобы выяснить, сколько вкладок вам нужно и их названия) - затем по щелчку - вызов AJAX для загрузки содержимого этой конкретной вкладки
Вы можете взглянуть, например, на angular.js или Backbone .
Смотрите мое редактирование. Я хочу использовать ранее загруженный контент. Поэтому никакие .remove() или повторные вызовы AJAX не соответствуют моим потребностям.

Jeremy J Starcher · Accepted Answer · 2014-04-29T03-44-00.000Z

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

Решение 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);
}

Не могли бы вы обновить свой ответ с помощью фрагмента кода, как вернуть содержимое обратно? Большое спасибо.