重构重复的jQuery代码

Question

I would like to refactor the following piece of code from an old project.

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

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

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

What the code does is to make an AJAX call and get some HTML result which will be then appended to the three divs. The result is always the same, so there's no need to have three identical calls.

Is there any way I could rewrite this code in order to run the call a single time, store the output and then append it to the three divs?

I don't want to use "async" so I'm looking for other means to do it.

Thanks.

Answer 1

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

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

Answer 2

You can use the jQuery.get function to perform this. See https://api.jquery.com/jquery.get/

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

Answer 3

Assuming those id s are for div s you can reduce the query to be any div that has an id that ends in _div

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

Answer 4

You can just group the ids in the jQuery selector

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