0

クラス「角丸」を持つ現在のページ上のすべてのdivを検索し、それらのdivをいくつかのきれいな背景画像を含むラッピングテーブルに置き換えるjQuery関数を作成しようとしています。下記参照...

$(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

これを実現する1つの方法は、再帰関数を使用することです。これに（丸められた角の）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 に答える