Как сделать несколько вызовов Ajax при первой загрузке страницы при использовании одного и того же HTML div

Question

В настоящее время у меня настроен сайт HTML, в котором я передаю идентификатор div в качестве данных в мой Ajax.

<div id="1" class="stats">
    DATA GOES IN HERE
</div>
<div id="2" class="stats">
    DATA GOES IN HERE
</div>

У меня так, что при первой загрузке страницы Ajax загружен вызов, который находит идентификатор div и использует его для передачи данных.

$(document).ready(function(){
var fId = $(".stats").attr("id");
$.ajax({
    url: 'get_stats',
    type: 'GET',
    data: {fId : fId},
    success: function(data) {
        $("#"+fId).html(data);
    },
    error: function(data){
        alert("ERROR: " + data);
    }
});
});

Данные могут быть доставлены. Тем не менее, у меня есть около 26 таких дел, и мне нужно сделать этот вызов 26 раз. Проблема в том, что вызов выполняется только один раз, и данные загружаются только для самого первого div.

Как мне сделать так, чтобы я передавал данные из всех 26 div в вызов Ajax и перенести его в HTML при первой загрузке страницы?

Answer 1

Пожалуйста, попробуйте это

$(document).ready(function(){
   $(".stats").each((i,e)=>{
     let fId=$(e).attr("id");
     $.ajax({
       url: 'get_stats',
       type: 'GET',
       data: {fId : fId},
       success: function(data) {
         $("#"+fId).html(data);
       },
       error: function(data){
         alert("ERROR: " + data);
       }
     });   
   })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1" class="stats">
    DATA GOES IN HERE
</div>
<div id="2" class="stats">
    DATA GOES IN HERE
</div>

Answer 2

Вы можете просто сделать это с помощью al oop, например:

let divs = $(".stats");

$.each(divs, function (div) {
     //..do your ajax request here
});