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

Question

I have a bunch of DOM like 我有一堆DOM喜欢

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

and I want to replace it with a new set of stuff 我想用一套新东西替换它

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

Which will be fetched via Ajax. 哪个将通过Ajax获取。 My question is: what is the best way to do this? 我的问题是：最好的方法是什么？

$.replaceWith doesn't quite do what I want, because I then end up with multiple copies of the new stuff . $.replaceWith不是我想要的，因为我最终得到了新stuff多个副本。

I can guarantee that all the stuff will be in one contiguous block, and so presumably I could put in some placeholder after the last element (or before the first element) of the old stuff , remove the old stuff , and replace the placeholder with the new stuff . 我可以保证所有的stuff都在一个连续的块中，所以我可能会在旧stuff的最后一个元素之后（或在第一个元素之前）放入一些占位符，删除旧的stuff ，并用新的stuff 。

However, this seems rather roundabout and inelegant. 然而，这似乎相当迂回而且不优雅。 Is there any clever way of, removing all the old stuff and putting in a single copy of the new stuff , all at one go? 是否有任何巧妙的方法，删除所有旧的stuff ，并一次性放入一个新的stuff副本？

EDIT: I would also like to do this without using any container divs. 编辑：我也想在不使用任何容器div的情况下这样做。 Using container divs would work in the above case, but would fail in some cases, like when the stuff is inside a <table> : 使用容器div可以在上面的情况下工作，但在某些情况下会失败，比如当stuff在<table> ：

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

If i want to replace the rows labelled stuff with another set of rows, possibly more, possibly fewer, there is no way I can nicely put them in a container thingy without breaking the HTML, since the <body> can only contain <tr> s (IIRC). 如果我想用另一组行替换标记为stuff的行，可能更多，可能更少，我无法在不破坏HTML的情况下将它们很好地放入容器中，因为<body>只能包含<tr> （IIRC）。

Answer 1

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

Unlike .html() , this will work regardless of whether newContent is an HTML string, or an existing DOM structure. 与.html()不同，无论newContent是HTML字符串还是现有DOM结构，都可以使用。

If there are multiple elements to be replaced but where you need to retain their siblings, you can do this: 如果要替换多个元素但需要保留其兄弟姐妹，则可以执行以下操作：

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

ie take the first .stuff element, add the new content before it, and then remove all the .stuff elements. 即获取第一个.stuff元素，在其前面添加新内容，然后删除所有.stuff元素。

Answer 2

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

Answer 3

One way to do it would be with wrapAll : 一种方法是使用wrapAll ：

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

I'm not sure if that passes the "elegant" test, but it does work regardless of whether there is any other content in the containing element. 我不确定它是否通过了“优雅”测试，但它确实有效，无论包含元素中是否有任何其他内容。

With that said, though, this seems to be a very complicated solution to a simple problem. 尽管如此，对于一个简单的问题，这似乎是一个非常复杂的解决方案。 The simple solution would be to wrap your elements in a containing element; 简单的解决方案是将元素包装在一个包含元素中; this shouldn't be a problem if, as you say, you can guarantee that they will always be together. 如果像你说的那样，你可以保证他们永远在一起，这应该不是问题。

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

问题描述

3 个解决方案

解决方案1
12 已采纳 2012-05-23 15:48:10

解决方案2
3 2012-05-23 15:45:57

解决方案3
2 2012-05-23 15:48:30

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

问题描述

3 个解决方案

解决方案1 12 已采纳 2012-05-23 15:48:10

解决方案2 3 2012-05-23 15:45:57

解决方案3 2 2012-05-23 15:48:30

解决方案1
12 已采纳 2012-05-23 15:48:10

解决方案2
3 2012-05-23 15:45:57

解决方案3
2 2012-05-23 15:48:30