7

私はたくさんのDOMを持っています

<div>
    <div class="stuff"/>
    <div class="stuff"/>
    <div class="stuff"/>
</div>

そして私はそれを新しいものと交換したい

<div>
    <div class="stuff"/>
    <p class="stuff"/>
    <ul class="stuff"/>
    <a class="stuff"/>
</div>

これはAjax経由で取得されます。私の質問は：これを行うための最良の方法は何ですか？

$.replaceWith新しいの複数のコピーができてしまうので、私が望むことを完全には実行しませんstuff。

すべてが1つの連続したブロックに含まれることを保証できるstuffため、おそらく、古い要素の最後の要素の後（または最初の要素の前）にプレースホルダーを配置し、古いstuffものを削除してstuff、プレースホルダーを新しいものに置き換えることができstuffます。

ただし、これはかなり回りくどく、エレガントではないようです。stuff古いものをすべて削除し、新しいものを1つだけまとめて入れる、賢い方法はありstuffますか？

編集：コンテナdivを使用せずにこれも実行したいと思います。上記の場合、コンテナdivの使用は機能しますが、が：stuff内にある場合など、場合によっては失敗します。<table>

<table>
    <head/>
    <body>
        <tr/>
        <tr class="stuff"/>
        <tr class="stuff"/>
        <tr class="stuff"/>
        <tr/>
    </body>
</table>

ラベル付けされた行を別の行のセットで置き換えたい場合stuff、おそらくそれより多く、場合によってはより少なく、HTMLを壊さずにそれらをコンテナにうまく入れる方法はありません。これはs（IIRC）<body>しか含めることができないためです。<tr>

4

3 に答える 3

13 
$('#outerdiv').empty().append(newContent);

とは異なり.html()、これはnewContentHTML文字列であるか、既存のDOM構造であるかに関係なく機能します。

置き換える要素が複数あるが、それらの兄弟を保持する必要がある場合は、次のように実行できます。

$('.stuff').first().before(newContent).end().remove();

つまり、最初の.stuff要素を取得し、その前に新しいコンテンツを追加してから、すべての.stuff要素を削除します。

于 2012-05-23T15:48:10.190 に答える
3

はい：$('#tagetDiv').html(newContent)

于 2012-05-23T15:45:57.620 に答える
3

それを行う1つの方法は、次のようになりwrapAllます。

$('.stuff').wrapAll('<div/>').parent().replaceWith('<div class="stuff"/>');

それが「エレガント」テストに合格するかどうかはわかりませんが、含まれている要素に他のコンテンツがあるかどうかに関係なく機能します。

そうは言っても、これは単純な問題に対する非常に複雑な解決策のようです。簡単な解決策は、要素を含む要素でラップすることです。あなたが言うように、あなたが彼らが常に一緒になることを保証することができれば、これは問題ではないはずです。

于 2012-05-23T15:48:30.863 に答える