0

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

$(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会被我的包装表替换。

有趣的是，当我使用调试器单步执行这段代码时，实际上所有嵌套的 div 都被检索和处理了——它们根本不会在屏幕上更新。（注意：最外层的 div 首先被处理，然后是每个嵌套的孩子）。

  • 会不会是 each() 函数中的 DOM 元素变得陈旧了？
  • 我是否需要在每次迭代结束时以某种方式显式更新 DOM？
  • 或者有没有一种方法可以一次处理所有 div（即不使用 each() 函数）？
4

2 回答 2

1

试试这个或在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-11T04:59:50.123 回答
0

实现此目的的一种方法是使用递归函数 - 向它传递一个（圆角）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-11T05:02:15.063 回答