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; 
}