Question

我有一堆像

这样的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的多个副本。

我可以保证所有stuff都在一个连续的块中，因此我可能会在旧stuff的最后一个元素之后（或第一个元素之前）放入一些占位符，删除旧的stuff，并将占位符替换为新的stuff。

然而，这似乎相当迂回而且不优雅。是否有任何巧妙的方法，删除所有旧的stuff并一次性放入新stuff的一个副本？

编辑：我也想在不使用任何容器div的情况下这样做。使用容器div可以在上述情况下使用，但在某些情况下会失败，例如stuff位于<table>内时

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

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

Answer 1

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

与.html()不同，无论newContent是HTML字符串还是现有的DOM结构，都可以使用。

如果要替换多个元素，但需要保留其兄弟姐妹，则可以执行此操作：

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

即。获取第一个.stuff元素，在其中添加新内容，然后删除所有.stuff元素。

Answer 2

是：$('#tagetDiv').html(newContent)

Answer 3

实现目标的一种方法是使用wrapAll：

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

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

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

JQuery：用另一组替换元素集的优雅方式？

3 个答案: