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中的嵌套元素

回答

相關問題