jquery克隆和

Question

後我一直有一個問題調整一些圖像被封閉的引導模式隱藏。圖像層疊在一起，所以它們必須是絕對定位的。我想糾正圖像容器的大小，以便在打開模式時它們看起來不奇怪。

我有一個快速調整大小的功能，但它只會在圖像可見時才起作用。它在用戶調整瀏覽器窗口時使用。爲此使用它意味着用戶在一小段時間內看到未調整大小的容器。

下面的函數應該只在頁面加載時運行一次，並且在所有圖像加載完成後（即正在運行）運行。問題在於，由於某種原因，原始模式與克隆模式一起被刪除。如果我從jQuery鏈中刪除.remove()，那麼克隆仍然存在，但原始內容仍然被刪除。

var cloneCounter = 0; 

// Slow resize using jquery becuase 
// the images are hidden. 
function slowResize(parent, pId) { 
    // height of the largest image 
    var largest = 0; 

    var newId = "clone-" + cloneCounter + "-"; 

    // |find the modal that the parent is cloeset to 
    // |-clone the modal 
    // |--change the id of the clone 
    // |--find all elements 
    // |---change all the child ids 
    // |--insert the clone into the dom 
    // |--show the modal 
    // |--hide it from view, make dimensions (position: absolute, display: block, visibility: hidden) 
    // |--find all the images related to the parent passed in 
    // |---calculate which is the tallest 
    // |--hide the clone 
    // |--remove the clone 

    var original = parent.closest("div.modal"); 
    var clone = original.clone(true); 

    clone 
    .attr("id", newId + clone.attr("id")) 
    .find("*") 
     .each(function(index, element) { 
     if (element.id !== "") 
      element.id = newId + element.id; 
     }) 
    .end() 

    .after(original) 
    .modal("show") 
    .css({ 
     "visibility": "hidden", 
    }) 
    .find("#" + newId + pId).find("img") 
     .each(function() { 
     largest = (largest > $(this).outerHeight()) ? largest : $(this).outerHeight(); 
     }) 
    .end() 

    .modal("hide") 
    .remove(); 

    // apply the style 
    parent.css("height", (largest + 2)); 

    ++cloneCounter; 
} 

此外調整大小不起作用，但我現在不太擔心。

Answer 1

原因是我原來被刪除的麻煩是因爲我使用了錯誤的jQuery方法。 .after將內容插入圓括號內。我應該一直在使用.insertAfter。

e.g.

$(target).after(contentToBeInserted)

$(contentToBeInserted).insertAfter(target)

由於我呼籲克隆我應該使用第二實施例已經方法。

這裏是固定版本的函數。

var cloneCounter = 0; 

// Slow resize using jquery becuase 
// the images are hidden. 
function slowResize(parent, pId) { 
    // height of the largest image 
    var largest = 0; 

    var newId = "clone-" + cloneCounter + "-"; 

    // |find the modal that the parent is cloeset to 
    // |-clone the modal 
    // |--change the id of the clone 
    // |--find all elements 
    // |---change all the child ids 
    // |--insert the clone into the dom 
    // |--hide it from view, make dimensions available (position: absolute, display: block) 
    // |--find all the images related to the parent passed in 
    // |---calculate which is the tallest 
    // |--remove the clone 

    var original = parent.closest("div.modal"); 
    var clone = original.clone(true); 

    clone 
    .attr("id", newId + clone.attr("id")) 
    .find("*") 
     .each(function(index, element) { 
     if (element.id !== "") 
      element.id = newId + element.id; 
     }) 
    .end() 

    .insertAfter(original) 
    .css({ 
     "display": "block", 
     "left": "-9999px", 
    }) 
    .find("#" + newId + pId).find("img") 
     .each(function() { 
     var c = this; 

     if (c.offsetParent !== null) 
      largest = (largest > c.height) ? largest : c.height; 
     }) 
    .end() 

    clone.remove(); 

    // apply the style 
    parent.css("height", (largest + 2)); 

    ++cloneCounter; 
}