我已经将一个 div 分离,想要在点击按钮时重新附加它。
这是代码:
$('#wrapper').detach();
$("#open_menu").click(function(){
ATTACH HERE !!!
});
非常感谢您的帮助。
我已经将一个 div 分离,想要在点击按钮时重新附加它。
这是代码:
$('#wrapper').detach();
$("#open_menu").click(function(){
ATTACH HERE !!!
});
非常感谢您的帮助。
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(..)
中执行附加操作以保持一致的行宽是不必要的! - Joe Shanahanvar $wrapper = $('#wrapper').detach();
$("#open_menu").click(function(){
//ATTACH HERE !!!
$(this).prepend($wrapper); // or $(this).append($wrapper);
});
setTimeout
仅是为了让您在将元素从页面中分离之前查看它,并且已经重命名了一些元素。我想知道是否可以使用siblings
替代parent().children()
,但担心在分离的兄弟元素是唯一的兄弟元素时会发生什么情况,我们仍需要参考父元素,以便在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);
var $wrapper = $('#wrapper').detach();
$("#open_menu").click(function(){
$(this).append($wrapper[0])
});
$(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);
});
你可以在将元素分配给变量后,使用prepend()
方法将其插入到文档中,例如:
var det_elem = $('#wrapper').detach();
$("#open_menu").click(function(){
$(this).prepend(det_elem);
});
prepend() 将会在元素的开头添加。
jQuery没有提供attach方法。请注意,detach相当于从Dom永久删除项目。如果您认为可能需要删除并稍后重新引入元素,请考虑以下选项:
以上不是实现此操作的唯一两种方法,但它们简单易行,可能不需要太多代码更改。
append()
添加它怎么样? - adeneo