我可以用 jQuery 重新加载多个 div 吗？答案

【问题标题】：Can I reload multiple divs with jQuery?我可以用 jQuery 重新加载多个 div 吗？
【发布时间】：2019-10-22 11:37:27
【问题描述】：

我目前正在尝试按类重新加载一些 div：

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

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>

我在一个页面上有多个具有相同类的元素，所以我希望所有元素都可以重新加载，但遗憾的是它不起作用。也许我需要直接参考，但最好的选择是一行代码。有什么想法可以解决这个问题吗？

【问题讨论】：

你load的url参数格式好像不对。 " .avatar>"* 应该是什么意思？
@BoltKey 它是一个从响应中选择元素的选择器。见Loading Page Fragments。
选择器不选择任何元素，因为.avatar 元素没有（直接）子元素。
@BoltKey 啊是的，好点
您的 jquery 选择器不会返回要迭代的元素数组吗？自从我上次使用 jquery 以来已经有几个月了，但可能会循环使用它？

标签： javascript jquery html ajax reload

【解决方案1】：

jQuery 的.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`, '')

【讨论】：

如果我在它周围放一个包装器并重新加载包装器怎么办？像 jQuery(".wrapper").load(location.href + " .wrapper>*", ""); 这样的一个主类可以做到这一点吗？
好吧，我认为这是更好的解决方案。我会尝试一下。谢谢小伙伴的指点！
似乎无法正常工作。我现在有两个带有 avatar-wrapper 类的包装器，但我现在在一个包装器中有 2 个图像 lol
使用类的问题是有多个包装器。您告诉 jQuery 用响应中所有匹配的包装器替换每个包装器的内容，因此是重复的。我强烈建议使用单个 ID 包装器
终于在你的问题的帮助下做到了。谢谢你帮助我！