从 DOM 中删除元素并将它们添加回原来的位置

2024-03-31

我有一个模态窗口。我想要发生的事情是在模式打开时从页面中删除某些元素,并在模式关闭后将它们添加回原来的位置。我不想显示:无,因为这只会隐藏它们,我需要将它们实际从页面中删除。所以我有一些 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。


  1. Use .detach() and .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);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

从 DOM 中删除元素并将它们添加回原来的位置 的相关文章

随机推荐