jQuery追加不插入分离的元素

Question

我似乎无法为我使用 detach() 分离的元素添加附加功能

基本上我想做的是根据屏幕尺寸（大于 900 像素）从 DOM 中删除一些图像并将它们添加回来（小于 900 像素）。我正在使用enquire.js 处理断点，但我无法正确实现已删除元素的插入。

这是html：

<div class="mobile-slides">
  <a><img src="image.jpg" /></a>
  <a><img src="image2.jpg" /></a>
  <a><img src="image2.jpg" /></a>
</div>      

这是我正在使用的 js：

enquire.register("screen and (min-width: 900px)", {
    match : function() {
        var slides = $('.mobile-slides a').detach();
    },
    unmatch : function() {
        $('.mobile-slides').append(slides);
    }
});

分离似乎正在工作，但是当满足第二个条件时，什么都没有发生。我做错了吗？

编辑 代表我的愚蠢错误我只是在查询匹配函数中声明了变量“幻灯片”，因此它不适用于 unmatch 函数。

现在可以了：

var slides = $('.mobile-slides a');
enquire.register("screen and (min-width: 900px)", {
    match : function() {
        $('.mobile-slides a').detach();
    },
    unmatch : function() {
        $('.mobile-slides').append(slides);
    }
});

我也可以使用 remove() 来代替 detach()

Answer 1

slides.appendTo( '.mobile-slides' );

按钮点击示例代码，

var slides;
$( "button" ).click(function() {
  if ( slides ) {
    slides.appendTo( ".mobile-slides" );
    slides = null;
  } else {
    slides = $('.mobile-slides a').detach();
  }
});