javascript – JQuery:用另一组替换元素集的优雅方法?

前端之家收集整理的这篇文章主要介绍了javascript – JQuery:用另一组替换元素集的优雅方法?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一堆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不能完全按照我的意愿行事,因为我最终得到了新内容的多个副本.

我可以保证所有的东西都在一个连续的块中,所以我可能会在旧东西的最后一个元素之后(或在第一个元素之前)放入一些占位符,删除旧的东西,并用新的东西.

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

编辑:我也想这样做而不使用任何容器div.使用容器div可以在上面的情况下工作,但在某些情况下会失败,比如当东西在< 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元素.

猜你在找的jQuery相关文章