7

我有一堆像

<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.

我可以保证所有的stuff都将在一个连续的块中，所以大概我可以在 old 的最后一个元素（或第一个元素之前）之后放置一些占位符stuff，删除 old stuff，并用 new 替换占位符stuff。

然而，这似乎相当迂回和不雅。有什么聪明的方法可以一次性删除所有旧的stuff并放入一个新的副本stuff吗？

编辑：我也想在不使用任何容器 div 的情况下执行此操作。在上述情况下，使用容器 div 可以工作，但在某些情况下会失败，例如当stuffa 位于内部时<table>：

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

如果我想stuff用另一组行替换标记的行，可能更多，可能更少，我无法在不破坏 HTML 的情况下很好地将它们放入容器中，因为<body>只能包含<tr>s (IIRC)。

4

3 回答 3

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

与 不同的是.html()，无论newContent是 HTML 字符串还是现有的 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

一种方法是使用wrapAll：

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

我不确定这是否通过了“优雅”测试，但无论包含元素中是否有任何其他内容，它都可以工作。

尽管如此，这似乎是一个简单问题的非常复杂的解决方案。简单的解决方案是将元素包装在包含元素中；这不应该是一个问题，如你所说，你可以保证他们将永远在一起。

于 2012-05-23T15:48:30.863 回答