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

Question

我有一个模态窗口.我想要发生的是当模态打开时从页面中删除某些元素,并将它们添加回模态关闭后的正确位置.我不想做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('<div id="original_' + originals.length + '"></div>');
});

///
/// Do something asynchronous 
///

// Replace placeholders with original content
for (var i in originals) {
 $('#original_' + (i + 1)).replaceWith(originals[i]);
}

见clone和replaceWith在jQuery的文档获取更多信息.