jQuery добавить, не вставляя отдельные элементы

Question

Кажется, я не могу получить доступ к работе над элементами, которые я отсоединяю с detach()

По сути, я хочу удалить некоторые изображения из DOM в зависимости от размера экрана (более 900 пикселей) и добавить их обратно (менее 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);
    }
});

Кажется, что Detach работает, но при выполнении второго условия ничего не происходит. Я делаю что-то неправильно?

РЕДАКТИРОВАТЬ Глупая ошибка от моего имени. Я только объявлял переменную "слайды" внутри функции поиска соответствия, поэтому она не была доступна для функции сравнения.

Теперь это работает:

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();
  }
});