JQueryUpdate 来自 Ajax 响应的多个元素答案

【问题标题】：JQueryUpdate Multiple Elements from Ajax ResponseJQueryUpdate 来自 Ajax 响应的多个元素
【发布时间】：2014-04-26 20:36:33
【问题描述】：

我有一个返回 HTML 响应的 Ajax 请求。

我想将 DOM 中的现有 DIV 替换为具有新内容的相应 ID。

我相信该方法类似于此处概述的内容：

Update multiple elements with html from jquery ajax call

这是我原来的 DOM：

<a onclick="ajaxTest();">Test</a>
<div id="x">
 xxx
</div>
<div id="y">
 yyy
</div>

这是回复：

<div id="response">
    <div id="x" class="room">111</div>
    <div id="y" class="room">222</div>
</div>

这是 JS。

function ajaxTest(){
    // UPDATE ON SERVER
    $.post("secure/admin/allocateRoom.do", {
        bookingId : 3051,
        roomId : 2291,
        success : function(data) {
            var $response = $(data);
            $response.children().each(function() {
                alert('in');
                $('#' + this.id).html(this.innerHTML);
            });
        }
    });
}

这现在适用于以下请求：

$.post("secure/admin/allocateRoom.do", {
    bookingId : bookingId,
    roomId : roomId
}, function(html) {
    var $response = $(html);
    $response.children().each(function() {
        if (this.id) {
            $('#' + this.id).replaceWith(this);
        }
    });
});

【问题讨论】：

我只是想澄清一些事情。你说“这是我原来的 DOM”，但那不是 DOM。那是您的 HTML 代码的 sn-p。 DOM 复杂得多，在页面上并不真正可见，但在页面上编写代码时非常重要。这是一种简单的表达方式，但是当您深入研究 DOM 时，它非常复杂。
这增加了讨论的内容？
知识。不然你为什么会来 Stack Overflow？

标签： jquery ajax

【解决方案1】：

试试这个；

success : function(data) {
    var $response = $(data);
    $response.children().each(function(){
        if (this.id) {
            $('#'+this.id).replaceWith(this);
        }
    });
}

DEMO

【讨论】：

谢谢，我已经尝试过了，据我所知，它似乎没有进入循环。我在那里放置了一个没有出现的警报。
您在问题中发布的回复不是有效的 HTML。在id="response 之后缺少一个引号，在每个room div 之后它应该是</div>，而不是<div>。一旦我解决了这个问题，循环就在我的测试中起作用了。
是的，只是一个错字。我已经用原始 HTML、响应和 JS 更新了问题。什么都没发生！如果我从响应中删除外部 DIV，我会得到一个“无效的 XML 错误”，这是有道理的，所以至少客户端发生了一些事情。你能发布你的例子吗？
查看我的 jsfiddle 演示。我已将答案更改为使用replaceWith，但我认为这不会有太大的不同。此更改确保属性也从响应中复制。
是的，您的演示使用相同的数据按预期工作。我的仍然没有成功：唯一的区别是我的来自远程来源。我用谷歌搜索了'jquery ajax parse html'并且有很多帖子。这些讨论是否相关？例如stackoverflow.com/questions/1529464/…