从DOM中删除元素并将它们添加到它们所在的位置

我有一个模态窗口。 我想要发生的是当模态打开时从页面中删除某些元素，并将它们添加回模态关闭后的正确位置。 我不想做display：none，因为只隐藏它们，我需要将它们实际从页面中删除。 所以我有一些jQuery删除并在一个计时器之后添加它们只是为了测试…

更新：通过对代码的这些添加，它现在抓取元素，然后在相同的元素之后将其添加回来。 问题是，如果该元素也被删除了怎么办？ 然后它不会重新加入！ 另外，javascript事件处理程序不会丢失吗？ 我正在开发一个插件，因此它应尽可能少地干扰网站，但是3D元素在Safari中有一个无法绕过的错误。

关于如何在不干扰人们网站的情况下暂时删除3d元素的任何想法？

$3delements = $('*').filter(function(){return $(this).css('-webkit-transform-style') == 'preserve-3d'}); $3delementsposition = $3delements.prev() //On modal open $3delements.remove(); //On modal close $3delementsposition.after($3delements); 

问题是，这需要我在DOM中指定某个位置让他们重新进入。我希望这些元素能够回到原来的位置。 如何确保元素不会将.remove上的信息更改/移动/丢失到.append。

Answer 1

1. 使用.detach()和.append()来删除和重新附加元素，它将维护您的所有事件和数据。

2. 如果按照与删除元素相反的顺序添加元素，则它们都应该重新放回原位

---

未经测试的代码

---

 var elems3d = $(...); var elemsRemoved = []; // removing elems3d.each(function(i,o) { var elem = $(o); elemsRemoved.push({ loc: elem.prev(), obj: elem.detach() }); }); // adding back while (elemsRemoved.length) { var elem = elemsRemoved.pop(); elem.loc.after(elem.obj); } 

Answer 2

不要删除元素，而是用占位符元素替换它们（使用replaceWith ），然后在需要时用原始内容替换占位符。 类似于以下内容：

 $3delements = $('*').filter(function(){return $(this).css('-webkit-transform-style') == 'preserve-3d'}); var originals = []; $3delements.each(function() { // Clone original, keeping event handlers and any children elements originals.push($(this).clone(true)); // Create placeholder for original content $(this).replaceWith('
'); }); /// /// Do something asynchronous /// // Replace placeholders with original content for (var i in originals) { $('#original_' + (i + 1)).replaceWith(originals[i]); } 

有关详细信息，请参阅jQuery文档中的clone和replaceWith 。

Answer 3

我创造了小提琴。 如果这符合您的要求，请告诉我。

http://jsfiddle.net/mNsfL/12/