Как правильно подгружать контент в указанные элементы?

20 января 2022, 01:10

Доброго времени суток!

Имеется такой код:

$(function () { 
 
var userID = $('.userlink'); // ссылка на страницу с которой нужно взять контент 
var user_avatar = $('.user-avatar'); // блок в который нужно загрузить контент 
 
$.each(userID, function (index, id) { 
  var id = $(this).attr('href'); 
  $.ajax({ 
    url: 'http://test-ajax.actieforum.com' + id, 
    type: 'GET', 
    success: function (data) { 
 
      var $content = $('.user-card'),  // Родительский блок аватарки и ссылки 
      custom_avatar = $('.mod-login-avatar', data).html(); // блок содержащий нужный контент, находится на другой странице(ах) 
        
      $content.each(function () { 
        var $this = $(this); 
        $this.find(user_avatar).append(custom_avatar); // вставляем полученный контент в указанный блок  
      }); 
    } 
 
  }); 
}); 
});

Добавил комментарии в код чтобы было понятнее.

Суть работы кода заключается в том чтобы найти на странице ссылки и получив их путь, загрузить нужный контент на страницу в указанные блоки. И да, всё как бы работает, но не совсем так как нужно. Загрузка контента происходит, однако все полученные результаты грузятся в каждый указанный блок, т.е в

<code lang="html">
  <div class="user-avatar"></div>
</code>

Взял за пример аватарки чтобы было нагляднее.

Разметка примерно такая:

<div class="user-card"> 
    <div class="user-avatar"></div> 
    <a class="userlink" href="/u1"></a> 
</div> 
 
<div class="user-card"> 
    <div class="user-avatar"></div> 
    <a class="userlink" href="/u2"></a> 
</div>

Т.е таких блоков

<div class="user-card">
    <div class="user-avatar"></div>
    <a class="userlink" href="/u(здесь_циферка)"></a>
</div>

может быть неограниченное количество на странице.

Ну и по быстрому слепил демо, чтобы показать всё на живом примере. Ссылка на демо:

http://test-ajax.actieforum.com/h1-page

В двух блоках аватарки двух юзеров. Это было бы ещё ничего, но когда их станет 50 штук, вот тогда будет жесть.

Ребят, помогите, пожалуйста сделать так чтобы получаемый контент правильно грузился в указанные блоки. Т.е чтобы в блоке где содержится ссылка /u1 - туда грузилась аватарка именно с этой страницы, и так далее.

Буду благодарен за любую помощь!

PS: Реализация всего этого, уже выжрала мозги. Раньше никогда не работал с Ajax. Да и вопрос что-то было стыдно задавать, но уже не осталось выхода.

Answer 1

можно (нужно) пройтись циклом по user-card, а не по userlink. Сейчас, судя по коду, во всех блоках всегда будет результат последнего запроса (в каждом аяксе вы подставляете значение во всю коллекцию user-avatar) :

let $userCards = $('.user-card');
$userCards.each(function (idx, el) {
  let e = $(el),
  userID = e.find('.userlink').attr('href'),
  userAvatar = e.find('.user-avatar');
  $.ajax({
    url: 'http://test-ajax.actieforum.com' + userID,
    ...
    success: ...
    // ну и дальше
  });
})