jQuery 用另一个 DOM 完全替换元素的 DOM - 更快的方法？

Question

我正在使用 jQuery 的 AJAX 从服务器获取新内容。数据以 JSON 格式加载：

$.ajax({
    url: url,
    data: {
        'ajax': '1',
    },
    dataType: 'json',
    success: somefunction
});

由于服务器端应用程序限制，我无法在内部设置更多 JSON 变量，因此我必须将所有内容加载到内容中。这就是为什么我必须将结果加载到 jQuery 中，而不是搜索和替换页面上的某些元素，例如（在 somefunction 中使用）：

var somefunction = function(data) {
    var con = $('<div></div>').html(data.content); // just $(data.content) is not working
    $('div#mainContent').html(con.find('div#ajax-content').html());
    ... // same process with three more divs
}

编辑：请注意，我必须执行相同的过程来替换三个 div！

还有更多相关内容，但作为示例，我希望这已经足够了。我的问题：对于某种逻辑方式，我希望将结果加载到 DOM ($(data.content))、解析为 html (con.find('dix#ajax-content').html()) 并返回到 DOM ($('div#mainContent').html()) 在我看来就像失去一些资源并降低性能所以我想知道是否有更快的方法来直接加载 DOM，例如：

$('div#mainContent').dom(con.find('div#ajax-content').dom());

我试图用谷歌搜索它，但也许我不知道该输入什么。此外，jQuery 文档对我没有多大帮助。

一些事实：

• jQuery 1.9.1
• jQuery UI 1.10.3 可用

最后，我知道使用服务器端应用程序来提供更多 JSON 变量会更好，但是，我需要编写不太容易的代码，这需要更长的时间来开发我现在没有。目前在客户端执行此操作将是临时解决方案，但是，我不想大幅降低性能。

附带问题：

在这种情况下使用find()函数是正确的还是有更好的？

EDIT 2（无法解析字符串） 我期待这个工作，但它不是：

content = '<div id="ajax-title">Pečivo běžné, sladké, slané</div>
<div id="ajax-whereami"><a href="/category/4">Chléba a pečivo</a> » Pečivo běžné, sladké, slané</div>';
$(content);

Answer 1

我不确定这是否会有所帮助：

$('div#mainContent').replaceWith(con.find('div#ajax-content'))
 .attr("id","mainContent")

现在您不必设置元素的 html 并获取您刚刚从 JSON 创建的元素的 html。不确定这是否真的更快，但它确实跳过了 2 个 html() 步骤。

Answer 2

实际上，$(data.content) 应该可以正常工作，但您必须记住，只能通过.filter() 而不是.find() 访问顶级元素。如果您希望定位的元素至少比根深一层，您应该使用.find()；在下面的示例中，您可以在适当的情况下将 .filter() 替换为 .find()。

var $con = $(data.content);
$('div#mainContent')
  .empty()
  .append($con.filter('div#ajax-content'))
  .append($con.filter('div#another-id'))
  .append($con.filter('div#and-another-id'));

您也可以将选择器组合在一起：

  .append($con.filter('div#ajax-content, div#another-id, div#and-another-id'));

最后，由于标识符只能在文档中出现一次，您可以删除 div 部分：

  .append($con.filter('#ajax-content, #another-id, #and-another-id'));

更新

好吧，当换行符出现在错误的地方时，jQuery 似乎无法正确评估 data.content；这应该适用于所有情况：

var wrapper = document.createElement('div');
wrapper.innerHTML = data.content;

var $con = $(wrapper);

Answer 3

您可以使用.load，尽管我相信它本质上只是同一事物的包装器：

$("#mainContent").load(url + " #ajax-content", data);

您可以通过仅发送特定的 ajax 内容（较少下载和解析）来提高服务器端的性能，尽管这可能很困难。

除此之外，最好的办法是在 jQuery 上使用 vanilla JS，至少用于附加（直接使用 innerHTML）。