Скрепление jQuery detach();

Ответ 1

var el = $('#wrapper').detach();

$("#open_menu").click(function(){
    $(this).append(el);
});

Ответ 2

Мне понадобилось решение, которое будет работать, даже если есть другие элементы после отсоединения целевого элемента и последующего повторного подключения. Это означает, что append может быть ненадежным, потому что он перенесет этот элемент обратно в конец своего родителя. Мне пришлось использовать заполнитель, который может быть не самым элегантным решением, но я не нашел другого способа.

var $wrapper = $('#wrapper')
    , $placeholder = $('<span style="display: none;" />').insertAfter( $wrapper )
    ;
$wrapper.detach();

$("#open_menu").on('click',function(){
    $wrapper.insertBefore( $placeholder );
    $placeholder.remove();
});

Чтобы сделать это более многоразовым, было бы лучше обернуть его в плагин jQuery:

(function($){

    $.fn.detachTemp = function() {
        this.data('dt_placeholder',$('<span style="display: none;" />').insertAfter( this ));
        return this.detach();
    }

    $.fn.reattach = function() {
        if(this.data('dt_placeholder')){
            this.insertBefore( this.data('dt_placeholder') );
            this.data('dt_placeholder').remove();
            this.removeData('dt_placeholder');
        }
        else if(window.console && console.error)
        console.error("Unable to reattach this element "
        + "because its placeholder is not available.");
        return this;
    }

})(jQuery);

Использование:

var $wrapper = $('#wrapper').detachTemp();
$("#open_menu").on('click',function(){
    $wrapper.reattach();
});

Ответ 3

если вы хотите, чтобы ваш элемент был прикреплен в начале элемента, который вы могли бы использовать .prepend()

в противном случае вы могли бы присоединить его, используя append().

в вашем случае это будет:

var $wrapper = $('#wrapper').detach();

$("#open_menu").click(function(){
    //ATTACH HERE !!!
    $(this).prepend($wrapper); // or $(this).append($wrapper);
});

Надеюсь, это поможет:)

Ответ 4

$(function(){
 var detached = $('#element_to_detach').detach();
 // Here We store the detach element to the new variable named detached
 $('.element_after_which_you_need_to_attach').after(detached);
});

Ответ 5

var $wrapper = $('#wrapper').detach();

$("#open_menu").click(function(){
    $(this).append($wrapper[0])
});

Ответ 6

Я думаю, что это во многом вопрос записи индекса элемента, который будет отсоединен, до его отсоединения, а затем используя этот индекс для определения места для повторного прикрепления элемента. Рассмотрим следующий "repl" https://repl.it/@dexygen/re-attach и код ниже. setTimeout - это просто, чтобы вы могли видеть элемент на странице, прежде чем он будет отсоединен, и несколько элементов были переименованы. Интересно, можно ли использовать siblings вместо parent().children(), но меня беспокоит то, что происходит в том случае, когда отдельный брат является единственным элементом среди братьев и сестер, и нам нужна ссылка на parent в любом случае для добавления if index === 0.

setTimeout(function() {
    var bar = $('#bar');
    var parent = bar.parent();
    var index = parent.children().index(bar);

    bar.detach();

    $("#re-attach").one('click', function() {
        if (index === 0) {
            parent.prepend(bar);  
        }
        else {
            parent.children().eq(index-1).after(bar);
        }
    });
}, 5000);

Ответ 7

jQuery не предлагает метод attach. Считайте, что отсоединение является эквивалентом постоянного удаления элемента из Dom. Если вы считаете, что можете удалить и позже вернуть элемент, рассмотрите следующие параметры:

• Используйте метод переключения. Чтобы скрыть и отобразить элементы со страницы.
• Если вы должны полностью удалить элемент из Dom, подумайте о том, чтобы использовать метод клонирования jQuery, чтобы сначала создать копию указанного элемента, после чего вы можете позже вернуть экземпляр элемента обратно в Dom.

Вышеупомянутые не являются только двумя способами для достижения этого, однако они просто и, вероятно, не потребуют большого количества изменений кода на вашем конце.