Question

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

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

关于如何在不干扰人们网站的情况下暂时删除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

使用.detach()和.append()删除并重新附加元素，它会维护您的所有活动和数据。
如果按照与删除元素相反的顺序添加元素，则它们应该全部回归

未经测试的代码

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]);
}

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

Answer 3

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

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

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

3 个答案: