Question

我已经分离了一个div，并希望在点击按钮时重新附加它。

以下是代码：

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

$("#open_menu").click(function(){
    ATTACH HERE !!!
});

任何帮助将不胜感激。

Answer 1

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

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

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

Answer 3

如果您希望您的项目附加在您可以使用的元素的开头.prepend（）

否则你可以使用append（）附加它。

在你的情况下，它将是：

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

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

我希望它有所帮助：）

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

Answer 5

我认为这主要是在分离之前记录将要分离的元素的索引，然后使用该索引来确定重新附加元素的位置。请考虑以下“repl”https://repl.it/@dexygen/re-attach和以下代码。 setTimeout仅仅是为了让您在分离之前可以看到页面中的元素，并且已经重命名了几个元素。我想知道是否可以使用siblings而不是parent().children()但是我担心如果兄弟姐妹中的分离兄弟是唯一的元素会发生什么，我们需要引用{ {1}}无论如何，预先 parent。

index === 0

Answer 6

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

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

Answer 7

将分离的元素分配给变量后，prepend()怎么样？

var det_elem = $('#wrapper').detach();
$("#open_menu").click(function(){
    $(this).prepend(det_elem);
});

prepend（）将附加在元素的开头。

Answer 8

jQuery不提供附加方法。考虑分离相当于永久删除Dom中的项目。如果您认为可能要删除并稍后恢复元素，请考虑以下选项：

使用切换方法。隐藏和取消隐藏页面中的元素。
如果您必须绝对从Dom中删除该项，请考虑使用jQuery clone方法，首先制作指定元素的副本，然后您可以将元素副本重新引入Dom。

以上并不是实现此目的的唯一两种方法，但是，它们很简单，并且可能不需要在您的代码上进行太多代码更改。

重新附加jQuery detach（）;

8 个答案: