使用jQuery AJAX调用更新多个元素的HTML内容

Question

使用jQuery AJAX调用更新多个元素的HTML内容

4

我有一个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，因为这超出了我的控制范围）？

- Paul Hiles

2

我不确定除了将片段存储在JS变量中之外，您还有什么其他建议。您不能直接填充需要更新的div吗？ - David Barker

当你说直接填充时，考虑到响应的格式，我该怎么做呢？据我所知，我需要解析响应以确定（在示例中）#some-div和#some-other-div需要更新。 - Paul Hiles

你完全可以使用普通的JavaScript来选择缓存中的DOM元素，然后修改DOM内部HTML属性中的div。另外，既然你正在使用jQuery，为什么不直接使用它来选择正确的HTML并将其插入到DOM中呢？ - David Barker

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- letiagoalves · Accepted Answer

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

类似这样：

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

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