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/