jQuery：替换DOM中的嵌套元素

我正在尝试编写一个jQuery函数来搜索当前页面上所有具有“圆角”类的div，然后用一个包含一些换行符的换行表替换这些div漂亮的背景图像。见下文......jQuery：替换DOM中的嵌套元素

$(document).ready(function() 
{ 
    // For all "rounded-corners" div's on the page... 
    $("DIV.rounded-corners").each(function() 
    { 
     // Copy the contents of the div into a wrapping table. 
     var $roundedCornersContainer = $('<table cellpadding="0" cellspacing="0" class="rounded-corners-container"> \ 
              <tr> \ 
               <td class="corner-topleft"></td> \ 
               <td class="corner-topright"></td> \ 
              </tr> \ 
              <tr> \ 
               <td class="original-content" colspan="2">THIS IS WHERE THE CONTENT IS INSERTED</td> \ 
              </tr> \ 
              <tr> \ 
               <td class="corner-bottomleft"></td> \ 
               <td class="corner-bottomright"></td> \ 
              </tr> \ 
             </table>'); 

     $roundedCornersContainer.find("TD.original-content").append($(this).html()); 

     // Replace the original "rounded-corners" div with the populated wrapping table. 
     $(this).replaceWith($roundedCornersContainer); 
    }); 
});

这个伟大的工程，只要不存在任何嵌套的“四舍五入的角落”的div。如果有，那么只有最外层的div被我的包裹表取代。有趣的是，当我用degugger遍历这段代码时，所有嵌套的div实际上被检索和处理 - 它们simpy不会在屏幕上更新。（注意：首先处理最外面的div，然后再处理每个嵌套的子项）。

难道是each（）函数中的DOM元素变得陈旧吗？
我是否需要在每次迭代结束时以某种方式显式更新DOM？
或者有什么办法可以一次处理所有div（即不使用each（）函数）？

来源

2012-07-11 Nick Larter

你能不能另一个类添加到外层div，然后用它来找到你的div？如果你做了一个'$（“div.rounded-corners”），那么当然它会返回所有的div.rounded角落，即使它们嵌套在其他div.rounded角落。 – Jeemusu 2012-07-11 04:22:12

当您使用replaceWith时，应该已经删除原始的内部分隔角落。 – Willy 2012-07-11 04:32:06

试试这个还是看在实现，这是通过使用递归函数的jsfiddle

$(document).ready(function() 
{ 
    // For all "rounded-corners" div's on the page... 
    var str = '<table cellpadding="0" cellspacing="0" class="rounded-corners-container"> \ 
     <tr> \ 
      <td class="corner-topleft"></td> \ 
      <td class="corner-topright"></td> \ 
     </tr> \ 
     <tr> \ 
      <td class="original-content" colspan="2">THIS IS WHERE THE CONTENT IS INSERTED</td> \ 
     </tr> \ 
     <tr> \ 
      <td class="corner-bottomleft"></td> \ 
      <td class="corner-bottomright"></td> \ 
     </tr> \ 
    </table>'; 
    $("DIV.rounded-corners").each(function() 
    { 

     var tmp = $(this); 
     var $roundedCornersContainer = $(str);   
     $roundedCornersContainer.insertAfter(tmp).find("TD.original-content").append(tmp); 

    }); 
});

来源

2012-07-11 04:59:50 Willy

非常感谢@Willy。我盯着这个很长时间，并没有理解它是如何工作的（即使你提供了证明！）。我最终转向jQuery SDK，并阅读append（）＆prepend（）函数实际上将原始元素移动到目标节点中。 – 2012-07-11 07:37:01

一个办法 - 你传递一个（四舍五入来访者）DIV对象，首先它调用自身任何嵌套的圆角DIV在更换之前。

这里有一个演示： http://jsfiddle.net/emtSS/3/

并且上面进行递归看起来像你的功能：

function replaceDiv(div) { 
// For all nested "rounded-corners" div's, recursively call this function to replace them first 
div.find("DIV.rounded-corners").each(function() { 
    replaceDiv($(this)); 
}); 
// Copy the contents of the div into a wrapping table. 
var $roundedCornersContainer = $('<table cellpadding="0" cellspacing="0" class="rounded-corners-container"> \ 
             <tr> \ 
              <td class="corner-topleft"></td> \ 
              <td class="corner-topright"></td> \ 
             </tr> \ 
             <tr> \ 
              <td class="original-content" colspan="2">THIS IS WHERE THE CONTENT IS INSERTED</td> \ 
             </tr> \ 
             <tr> \ 
              <td class="corner-bottomleft"></td> \ 
              <td class="corner-bottomright"></td> \ 
             </tr> \ 
            </table>'); 

$roundedCornersContainer.find("TD.original-content").append(div.html()); 

// Replace the original "rounded-corners" div with the populated wrapping table. 
div.replaceWith($roundedCornersContainer); 
};

来源

2012-07-11 05:02:15 soupy1976

非常感谢您的建议@ soupy1976。我已经接受了Willy的回答，因为它使用更少的代码，并且使用更现代的jQuery方法来达到目的。再次感谢您的反馈。 – 2012-07-11 07:39:41

jQuery：替换DOM中的嵌套元素

回答

相关问题