временно удаление и более поздняя перевставка элемента DOM?
Есть ли некоторое волшебство jQuery, которое позволит мне сделать следующее:
[0-определяют некоторый элемент в HTML (например, флажок непроверенный)]
1-обновляют его элемент DOM путем установки одного из его атрибутов с помощью .attr () (например, путем установки его "проверенного" атрибута с помощью .attr ('проверенный', верный))
2-временно удаляют тот элемент из DOM
3-повторно вставляют исходный элемент в DOM, при сохранении всех его свойств (т.е., так, чтобы он был проверен, как это было в конце шага 1 - НЕ как он, был, когда первоначально определено в HTML),
Причина, почему я интересуюсь удалением этих элементов от DOM (вместо того, чтобы скрыть их) состоит в том, что я заметил, что это, кажется, улучшает производительность хороший бит. Моя страница имеет три различных "состояния", и только одна треть общего числа элементов DOM необходима в любом данном состоянии. [Я хочу сохранить его как единственную страницу с различными состояниями вместо того, чтобы повредить его в три отдельных страницы.]
До сих пор я удалял и повторно вставлял элементы в DOM путем хранения в var значения
$("#myElement").html()
и затем удаляя его, но теперь я заметил, что после реинтеграции того HTML в DOM изменения, внесенные [на шаге 1], были "отменены".
Существует ли способ сделать это - для временного удаления ненужного материала из DOM способом, который сохраняет все его свойства для более поздней реинтеграции?
спасибо за любое понимание,
lara
2 ответа
Можно использовать метод клонирования :
var els = $('.els'), saved = els.clone (true);
els.remove ();
// .... do other stuff
saved.appendTo ($('.wherever-you-want-to'));
При этом, однако, лучше показать и спрятать их (например, с помощью отображения: none), чем манипулировать МДМ, так как это очень дорого. Если нужно, используйте вставку и удаление DOM (как описано выше), а не .html (), который каждый раз воссоздавал узел из заданной строки.
Просто удалите элемент из документа и сохраните ссылку на него. Не нужно его клонировать.
var el;
function removeEl() {
el = $("#myElement")[0]; // Get the element itself
el.parentNode.removeChild(el);
}
function reinsertEl(node) {
node.appendChild(el);
}
Кстати, поскольку вы упомянули об этом в своем примере, гораздо проще, яснее и быстрее установить свойство checked флажка напрямую, чем использовать attr () . Нет необходимости задействовать атрибуты вообще, и действительно attr () jQuery обычно этого не делает. Просто выполните $ ("# myElement") [0] .checked = true; . Он работает во всех основных браузерах.