从jquery ajax调用html更新多个元素

Update multiple elements with html from jquery ajax call

本文关键字:元素 更新 html jquery ajax 调用      更新时间:2023-09-26

我有一个AJAX调用,返回多个需要在页面上替换的HTML片段:

<div data-replace="some-div">
  <p>whatever</p>
</div>
<div data-replace="some-other-div">
  <p>something else</p>
</div>

目前我正在添加所有的html到页面上的一个隐藏的div,然后做:

    hiddenDiv.find('[data-replace]').each(function () {
        $('#' + $(this).data('replace')).html($(this).html());
        $(this).remove();
    });

似乎可以工作,但似乎有点粗糙。

是否有更好的方法(同时仍然返回HTML而不是JSON,因为这是我无法控制的)?

我将创建一个包含所有DOM元素的jQuery对象,而不是将它们作为隐藏的div元素附加到文档中,因为您不需要它。你也不需要在你的更新后删除它。

像这样:

(假设您的AJAX响应是一个名为data的变量)

var $data = $("<div>" + data + "</div>");
$data.find('[data-replace]').each(function () {
    $('#' + $(this).data('replace')).html(this.innerHTML);
});