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（）步驟。