javascript - 使用来自 jquery ajax 调用的 html 更新多个元素

Question

我有一个 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();
    });

这似乎有效，但似乎有点hacky。

有没有更好的方法（同时仍然返回 HTML 而不是 JSON，因为这是我无法控制的）？

Answer 1

我会创建一个包含所有 DOM 元素的 jQuery 对象，并且不会将它们作为隐藏的 DIV 元素附加到文档中，因为您不需要它。此外，您无需在更新后将其删除。

像这样的东西：

（假设您的 AJAX 响应是一个名为 data 的变量）

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