Javascript 重构重复的jQuery代码

我想从一个旧项目中重构以下代码

$("#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中

我不想使用“异步”，所以我正在寻找其他方法来实现它

---

谢谢。

选择所有三个元素并调用load（）

---

假设这些

id

s用于

div

s，则可以将查询缩减为id以

\u div

结尾的任何

div

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

---

您可以使用

jQuery.get

函数来执行此操作。看

---

您可以在jQuery选择器中对ID进行分组

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

---

/…

代码是否也相同？是的，它们是相同的。

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

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