jquery - 获取并插入用jQuery

Question

我正在破解一个 Lightbox javascript 图像插件来显示页面上画廊中的缩略图。该页面有一系列<img>带有“gallery-image”类的。我正在收集它们并将它们放入名为“lb-thumbs”的灯箱叠加层中的一个 div 中。所以我把这段代码放到了一个灯箱函数中：

var $thumbs = ($(".gallery-image").get());
$lightbox.find('.lb-thumbs').append($thumbs);

它可以工作，但是一旦灯箱打开，原始图像（在灯箱覆盖层后面）就会消失，所以当我关闭灯箱时，页面的原始 html 库已经消失。由于浏览器检查器工具，我知道当灯箱打开时会发生这种情况。所以我的代码中一定有一些东西使这些<img>项目消失了。可以是 jQueryget()还是append()? 我看不出这是在哪里发生的。你能？

谢谢！马特

Answer 1

我认为 append() 实际上是导致你的问题。当您进行追加时，您并没有创建新对象，只是将旧图像从 DOM 中拉出并将其重新插入到您的灯箱中。

您始终可以在插入之前克隆对象。

演示

$lightbox.find('.lb-thumbs').append($thumbs.clone());

Answer 2

似乎该.get()方法返回对原始数组的引用。.get()反正都是多余的。尝试这个：

var $thumbs = $(".gallery-image");
$lightbox.find('.lb-thumbs').append($thumbs);

您可以在分配数组之前交替克隆数组：

var $thumbs = ($(".gallery-image").clone().get());
$lightbox.find('.lb-thumbs').append($thumbs);