重构重复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); 
});