分离后重新追加到DOM中

Appending back in to the DOM after detaching

本文关键字：DOM 追加 新追加 分离      更新时间：2023-09-26

我有一个典型的 html结构

<li>
  <div class="holder">
    <img src="imgSrc" class="masterImage" height="200" width="100">
  </div>
</li>

高度不同，是砖石结构的布局。

我想做的是，当页面滚动并离开视口时，将图像从DOM中分离出来，然后当它再次或第一次进入视口时重新附加它。

发生的事情是，图像分离正常，但没有重新连接

这是JQuery库代码：

(function($) {
$.belowthefold = function(element, settings) {
    var fold = $(window).height() + $(window).scrollTop();
    return fold <= $(element).offset().top - settings.threshold;
};
$.abovethetop = function(element, settings) {
    var top = $(window).scrollTop();
    return top >= $(element).offset().top + $(element).height() - settings.threshold;
};
$.inviewport = function(element, settings) {
    return !$.rightofscreen(element, settings) && !$.leftofscreen(element, settings) && !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
};
$.extend($.expr[':'], {
    "below-the-fold": function(a, i, m) {
        return $.belowthefold(a, {threshold : 0});
    },
    "above-the-top": function(a, i, m) {
        return $.abovethetop(a, {threshold : 0});
    },
    "in-viewport": function(a, i, m) {
        return $.inviewport(a, {threshold : 0});
    }
});
})(jQuery);

这就是我所说的，但正如我所说，它们没有重新连接：

$(window).bind("scroll", function(event) {
$(".masterImage:below-the-fold").each(function() {
  $(this).detach();
});
$(".masterImage:above-the-top").each(function() {
  $(this).detach();
});
$(".masterImage:in-viewport").each(function() {
  $(this).appendTo($(this).parent());
});
});

有什么想法为什么会失败吗？有更好的方法吗？

分离时，您必须实际存储对元素的引用，否则它将丢失

var elements = $(".masterImage:below-the-fold").detach();
// stuff
$('body').append(elements);

我将把如何将其与那些伪选择器结合起来留给您。

另一个问题是，一旦分离了一个元素，它就不再在DOM中，因此它没有父级，所以$(this).parent()什么都不做。

似乎隐藏和显示元素而不是从DOM中删除元素会容易很多？

相关文章：