重構重復的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

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

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

Answer 3

假設這些id是div你可以將查詢減少為id為以_div結尾的任何div

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

Answer 4

您可以只在jQuery選擇器中對id進行分組

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