Question

我似乎无法为使用detach（）

分离的元素进行追加工作

基本上我想要做的是根据屏幕尺寸（大于900px）从DOM中删除一些图像并将它们添加回来（小于900px）。我正在使用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);
    }
});

分离似乎正在起作用但是当满足第二个条件时，没有任何事情发生。我做错了吗？

修改代表我的愚蠢错误我只是在查询匹配函数中声明变量“slide”，因此它不适用于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();
  }
});

jQuery追加不插入分离的元素

1 个答案: