Refactor repetitive jQuery Code

Question

Ich möchte das folgende Stück Code aus einem alten Projekt refaktorieren.

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

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

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

Was der Code tut, ist eine AJAX-Aufruf zu machen und einige HTML-Ergebnis zu erhalten, die dann an den drei divs angehängt wird. Das Ergebnis ist immer das gleiche, so dass drei identische Anrufe nicht erforderlich sind.

Gibt es eine Möglichkeit, diesen Code umschreiben zu können, um den Aufruf ein einziges Mal auszuführen, die Ausgabe zu speichern und dann an die drei divs anzuhängen?

Ich möchte nicht "async" verwenden, also suche ich nach anderen Mitteln, es zu tun.

Danke.

Answer 1

Wählen Sie alle drei Elemente und rufen Last()

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

Answer 2

diese id s Unter der Annahme, sind für div s Sie die Abfrage reduzieren kann jede div sein, die eine ID hat, die

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

in _div endet

Answer 3

Sie können dazu die Funktion jQuery.get verwenden. Siehe https://api.jquery.com/jquery.get/

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

Answer 4

Sie können Gruppe nur die IDs in der jQuery-Selektor

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