33

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

这是代码：

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

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

任何帮助将不胜感激。

4

8 回答 8

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

$("#open_menu").click(function(){
    $(this).append(el);
});
于 2012-11-23T19:08:09.410 回答
23

我需要一个解决方案，即使目标元素之后还有其他元素要分离然后重新附加，它也能正常工作。这意味着这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();
});
于 2014-04-03T12:21:03.127 回答
6

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

否则你可以使用 append() 附加它。

在您的情况下，它将是：

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

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

我希望它有帮助:)

于 2015-06-22T18:06:05.870 回答
4

我认为这主要是记录将要分离的元素的索引，然后再分离它，然后使用该索引来确定重新附加元素的位置。考虑以下“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);
于 2017-11-26T07:12:45.360 回答
3 
$(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);
});
于 2017-01-18T10:54:57.460 回答
2 
var $wrapper = $('#wrapper').detach();

$("#open_menu").click(function(){
    $(this).append($wrapper[0])
});
于 2017-08-14T15:42:30.887 回答
1

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

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

prepend()将附加在元素的开头。

于 2018-10-31T19:03:41.320 回答
-10

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

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

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

于 2016-02-15T23:01:16.857 回答