我已经分离了一个 div，并希望在单击按钮时重新附加它。
代码如下：
$('#wrapper').detach();
$("#open_menu").click(function(){
ATTACH HERE !!!
});
我们将不胜感激。
【问题讨论】：
append()'ing 怎么样？
标签： jquery
var el = $('#wrapper').detach();
$("#open_menu").click(function(){
$(this).append(el);
});
【讨论】：
我需要一个解决方案，即使在目标元素之后还有其他元素要分离然后重新附加时也能正常工作。这意味着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();
});
【讨论】：
console.error(..) 中执行追加操作来保持一致的线宽！
如果您希望您的项目附加在元素的开头，您可以使用 .prepend()
否则你可以使用 append() 附加它。
在你的情况下是：
var $wrapper = $('#wrapper').detach();
$("#open_menu").click(function(){
//ATTACH HERE !!!
$(this).prepend($wrapper); // or $(this).append($wrapper);
});
希望对你有帮助:)
【讨论】：
我认为这主要是在分离之前记录将要分离的元素的索引，然后使用该索引来确定重新附加元素的位置。考虑以下“repl”https://repl.it/@dexygen/re-attach 和下面的代码。 setTimeout 只是为了让您可以在页面中的元素被分离之前看到它，并且一些元素已被重命名。我想知道是否可以使用siblings 代替parent().children()，但我担心如果分离的兄弟姐妹是兄弟姐妹中的 only 元素会发生什么，无论如何我们都需要引用parent，如果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);
【讨论】：
$(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);
});
【讨论】：
var $wrapper = $('#wrapper').detach();
$("#open_menu").click(function(){
$(this).append($wrapper[0])
});
【讨论】：
prepend() 将分离的元素分配给变量后怎么样，即。
var det_elem = $('#wrapper').detach();
$("#open_menu").click(function(){
$(this).prepend(det_elem);
});
prepend() 将附加在元素的开头。
【讨论】：
jQuery 不提供附加方法。考虑分离相当于从 Dom 中永久删除一个项目。如果您认为您可能想要删除并稍后恢复某个元素，请考虑以下选项：
上述方法并不是实现此目的的唯一两种方法，但是，它们很简单，并且可能不需要您对代码进行太多更改。
【讨论】：