jQuery追加（）定位

Question

我必须从我的网站删除（）几个iems，然后追加（）他们回来，但当我追加他们时，他们出现在不同的地方，而我希望他们完全一样地显示在他他们曾经的地方。

有没有解决方法？

这里有一个沙箱，随时更新（注意图像的第一追加后如何改变现在的位置）：

http://jsfiddle.net/Zt9tZ/1/

Answer 1

也许有我在这里失踪了一些额外的信息，但为什么完全删除吗？有什么理由不能仅仅使用hide和show？

http://jsfiddle.net/Zt9tZ/10/

与追加的问题是，你添加的元素作为最后一个父。如果你真的必须完全删除元素出于某种原因，你可以在它的位置放置某种占位符。也许用replaceWith和一些不可见的元素，以后会被原始元素再次替换。

---

或者，你可以跟踪最近的兄弟和使用insertBefore或insertAfter。

编辑：的insertAfter一个例子：

var image = jQuery(".image"); 
var prev; 

jQuery("#remove").click(function(){ 
    prev = image.prev(); 
    image.remove(); 
}); 

jQuery("#append").click(function(){ 
    if(prev.length === 0){ 
     // element was first 
     jQuery("#container").prepend(image); 
    }else{ 
     image.insertAfter(prev); 
    } 
}) 

http://jsfiddle.net/Zt9tZ/12/

---

EDIT2：的replaceWith示例：

var image = jQuery(".image"); 
var replacement = $("<div></div>"); 

jQuery("#remove").click(function(){ 
    image.replaceWith(replacement); 
}); 

jQuery("#append").click(function(){ 
    replacement.replaceWith(image); 
}) 

http://jsfiddle.net/Zt9tZ/13/

Answer 2

在这种特殊情况下，你应该在使用.prepend()相反，把它放回去所选元素的开头，而不是结尾。

Answer 3

我会为图像做一个绝对位置的CSS。

CSS

.imageStatic 
{ 
    position:absolute; 
    left:20px; 
    top:45px; 
} 

的Javascript

var image = jQuery(".imageStatic"); 

jQuery("#remove").click(function(){ 
    var image = jQuery(".imageStatic").remove(); 
}); 

jQuery("#append").click(function(){ 
    jQuery("#container").append(image); 
    $("#container img").addClass("imageStatic"); 
}) 

工作样本：http://jsfiddle.net/Zt9tZ/9/

Answer 4

您可以使用hide（）和show（）来达到相同的效果，但元素将保持原位。

基本上是这样的：http://jsfiddle.net/4JQ9m/