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 
} 

编辑：请注意，我必须做同样的过程，以取代三个divs！

还有更多关于这个，但作为例子，它是足够的，我希望。我的问题：对于某种逻辑方式，我期望将结果加载到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

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

更新

O凯，似乎jQuery不正确地评估data.content时有错误的地方换行;这应该适用于所有情况：

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

var $con = $(wrapper); 

Answer 2

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

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

您可以通过发送只有特定的内容（Ajax）提高在服务器端性能（从低到下载和分析），虽然这可能是困难的。

除此之外，你最好的选择是使用vanilla JS over jQuery，至少为了追加（直接使用innerHTML）。

Answer 3

我不知道它这将帮助：

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

现在你不必设置元素的html和获得的的HTML您刚从JSON创建的元素。不知道这实际上是否更快，但它确实跳过了2个html（）步骤。