重構重複jQuery代碼

Question

我想重構舊項目中的以下代碼片段。

$("#foo_div").html('').load('/some/route/', function(){ 
    // ... 
}); 

$("#bar_div").html('').load('/some/route/', function(){ 
    // ... 
}); 

$("#baz_div").html('').load('/some/route/', function(){ 
    // ... 
}); 

什麼代碼所做的是使AJAX調用，並得到一些HTML結果將被追加隨後的三個div的。結果總是相同的，所以不需要有三個相同的呼叫。

有沒有什麼方法可以重寫這段代碼，以便一次運行調用，存儲輸出，然後將其附加到三個div？

我不想使用「異步」，所以我正在尋找其他方式來做到這一點。

感謝。

Answer 1

選擇所有三個要素，並調用load（）方法

$("#a, #b, #c").html("").load('foo.html', function(){}); 

Answer 2

假設那些id s爲爲div是你可以減少查詢是具有在_div

$("div[id$='_div']").html('').load('/some/route/', function(){ 
    // ... 
}); 

結尾的ID任何 div

Answer 3

您可以使用jQuery.get函數來執行此操作。見https://api.jquery.com/jquery.get/

$.get("...", function(data) { 
    $("#foo_div").html(data); 
    $("#bar_div").html(data); 
    $("#baz_div").html(data); 
}); 

Answer 4

你可以組中的jQuery選擇

$.ajax("...", function(data) { 
    $("#foo_div, #bar_div, #bar_div").html(data); 
});