JQuery:用另一组元素替换一组元素的优雅方式

JQuery: elegant way to replace set of elements with another set?

本文关键字：一组 元素 方式 JQuery 替换      更新时间：2023-09-26

我有一堆像 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 的情况下将它们很好地放入容器中，因为<body>只能包含 <tr> s（IIRC）。

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

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

如果要替换多个元素，但需要保留其同级元素，则可以执行以下操作：

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

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

一种方法是使用wrapAll：

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

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

话虽如此，但这似乎是对简单问题的一个非常复杂的解决方案。简单的解决方案是将您的元素包装在一个包含元素中;如果正如你所说，你可以保证他们会永远在一起，这应该不是问题。

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

相关文章：