Могу ли я перезагрузить несколько div с jQuery?

Question

В настоящее время я пытаюсь перезагрузить некоторые div по классу:

jQuery(".avatar-wrapper").load(location.href + " .avatar-wrapper>*", "");

img {
  width: 80px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="avatar-wrapper">
  <img class="avatar" src="https://target.scene7.com/is/image/Target/GUEST_7f86ff7a-22f0-4556-997c-b6dc907a1940?wid=488&hei=488&fmt=pjpeg">
</div>

<div class="avatar-wrapper">
  <img class="avatar" src="https://target.scene7.com/is/image/Target/GUEST_7f86ff7a-22f0-4556-997c-b6dc907a1940?wid=488&hei=488&fmt=pjpeg">
</div>

У меня есть несколько элементов с одним классом на странице, поэтому я ожидал, что все элементы будут перезагружены с этим, но, к сожалению, это не работает,Возможно, мне нужна прямая ссылка, но лучшим вариантом будет одна строка кода.Любые идеи, как я могу справиться с этим?

Answer 1

jQuery's .load() загружает удаленный контент в элементы страницы.<img> элементы не содержат содержимого, поэтому это не сработает.Вам лучше удалить все свои изображения, чем заменить их на ответы из $.post(), например,

$.post(location.href).done(doc => {
  $('.avatar').remove()
  $(doc).find('.avatar').appendTo('#some-container-element')
})

---

В качестве альтернативы перезагрузите элемент, обертывающий ваши изображения

$('#some-container-element').load(`${location.href} #some-container-element`, '')