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

Question

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

我尝试用 google 搜索它，但也许我不知道该输入什么。另外 jQuery 文档对我帮助不大。

\n\n

一些事实：

\n\n

\n
• jQuery 1.9.1
\n
• jQuery UI 1.10.3 可用
\n

\n\n

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

\n\n

附带问题：

\n\n

在这种情况下使用函数是否正确find()，或者有更好的函数吗？

\n\n

编辑2（无法解析字符串） \n我期待这个工作，但事实并非如此：

\n\n

content = \'<div id="ajax-title">Pe\xc4\x8divo b\xc4\x9b\xc5\xben\xc3\xa9, sladk\xc3\xa9, slan\xc3\xa9</div>\n<div id="ajax-whereami"><a href="/category/4">Chl\xc3\xa9ba a pe\xc4\x8divo</a> \xc2\xbb Pe\xc4\x8divo b\xc4\x9b\xc5\xben\xc3\xa9, sladk\xc3\xa9, slan\xc3\xa9</div>\';\n$(content);\n

\n

Answer 1

实际上，$(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'));

更新

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

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

var $con = $(wrapper);