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