重新附加 jQuery detach();
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13534601/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Re-attaching jQuery detach();
提问by Jacques Goudreau
I have detached a div and want to re-attach it when clicking on a button.
我已经分离了一个 div 并希望在单击按钮时重新附加它。
Here's the code:
这是代码：
$('#wrapper').detach();
$("#open_menu").click(function(){
ATTACH HERE !!!
});
Any help will be appreciated.
任何帮助将不胜感激。
回答by Asad Saeeduddin
var el = $('#wrapper').detach();
$("#open_menu").click(function(){
$(this).append(el);
});
回答by MjrKusanagi
I needed a solution that would work even if there are other elements after the target element to detach and then reattach. This means that appendmay not be reliable because it would move that element back to the end of its parent. I had to use a placeholder which may not be the most elegant solution, but I haven't found another way..
我需要一个解决方案，即使目标元素之后还有其他元素要分离然后重新附加，该解决方案也能正常工作。这意味着这append可能不可靠，因为它会将元素移回其父元素的末尾。我不得不使用一个占位符，这可能不是最优雅的解决方案，但我还没有找到另一种方法..
var $wrapper = $('#wrapper')
, $placeholder = $('<span style="display: none;" />')
.insertAfter( $wrapper )
;
$wrapper.detach();
$("#open_menu").on('click',function(){
$wrapper.insertBefore( $placeholder );
$placeholder.remove();
});
To make this more reusable, it might be better to wrap it in a jQuery plugin:
为了使其更可重用，最好将其包装在 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);
Usage:
用法：
var $wrapper = $('#wrapper').detachTemp();
$("#open_menu").on('click',function(){
$wrapper.reattach();
});
回答by Mensur Gri?evi?
if you want your item to attach at the beginning of the element you could use .prepend()
如果您希望您的项目附加在元素的开头，您可以使用 .prepend()
otherwise you could attach it using append().
否则你可以使用 append() 附加它。
in your case it would be:
在您的情况下，它将是：
var $wrapper = $('#wrapper').detach();
$("#open_menu").click(function(){
//ATTACH HERE !!!
$(this).prepend($wrapper); // or $(this).append($wrapper);
});
I hope it helps :)
我希望它有帮助:)
回答by Saif-ur- Rehman
$(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);
});
回答by Dexygen
I think this is largely a matter of recording the index of the element that will be detached, before detaching it, then using that index for determining where to re-attach the element. Consider the following "repl" https://repl.it/@dexygen/re-attachand the code below. The setTimeoutis merely so you can see the element in the page before it gets detached, and a couple of elements have been renamed. I wonder if siblingscan be used instead of parent().children()but am concerned what happens in the event the detached sibling is the onlyelement among siblings, and we need a reference to parentanyway, for prependingif index === 0.
我认为这主要是在分离之前记录将分离的元素的索引，然后使用该索引来确定重新附加元素的位置。考虑以下“repl” https://repl.it/@dexygen/re-attach和下面的代码。这setTimeout只是为了让您可以在分离之前看到页面中的元素，并且一些元素已被重命名。我不知道是否siblings可以用来代替parent().children()，但我关注的事件中分离的兄弟姐妹是发生了什么只有兄弟姐妹之间的元素，我们需要一个参考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);
回答by Samwel Walter
How about prepend()the detached element after assigning it to a variable, ie.
prepend()将分离的元素分配给变量后如何，即。
var det_elem = $('#wrapper').detach();
$("#open_menu").click(function(){
$(this).prepend(det_elem);
});
prepend()will attach at the beginning of the element.
prepend()将附加在元素的开头。
回答by Ervin Llojku
var $wrapper = $('#wrapper').detach();
$("#open_menu").click(function(){
$(this).append($wrapper[0])
});
回答by PuReWebDev
jQuery does not offer an attach method. Consider that detach is the equivalent of permanently deleting an item from the Dom. If you believe that you might want to remove and later bring back an element, consider the following options:
jQuery 不提供附加方法。考虑到 detach 相当于从 Dom 中永久删除一个项目。如果您认为您可能想要删除并稍后恢复某个元素，请考虑以下选项：
- Use the toggle method. To hide and unhide elements from the page.
- If you must absolutely remove the item from the Dom, consider using the jQuery clone method, to first make a copy of the specified element, which you can then later reintroduce the element copy back to the Dom.
- 使用切换方法。隐藏和取消隐藏页面中的元素。
- 如果您必须完全从 Dom 中删除项目，请考虑使用 jQuery clone 方法，首先制作指定元素的副本，然后您可以稍后将元素副本重新引入 Dom。
The above are not the only two ways to accomplish this, however, they are simply and would likely not require much code changes on your end.
以上不是实现此目的的唯一两种方法，但是，它们很简单，您可能不需要对代码进行太多更改。
