我有一堆潜水员（使用nectar-post-grid-item类），我正在使用jquery向它们注入一个图像。这很好用。我还有一个 AJAX 加载更多按钮，它可以拉入并在页面上显示更多的div--我想在它们出现时将注入的图像添加到这些div中...我已经完成了这一切...但是...图像第二次添加到页面加载视图中的初始div集合中......当 AJAX 调用发生时，有没有方法可以阻止这种复制？

$(".nectar-post-grid-item").prepend("<img src='/wp-content/themes/salient-child/images/aspectTrans.png' class='PostGridItemTrans' alt='' />");
  }

上面的代码注入了我在window.load和document.ajaxComplete上调用的图像
因此，在初始页面加载时，div“nectar-post-grid-item”都添加了一个带有类“PostGridItemTrans”的图像。这很好，单击 AJAX 加载按钮后，下一组div都添加了这个“PostGridItemTrans”图像-但原始div会在另一次添加它，每次AJAX加载调用都会继续这样做...
我希望尝试查看“nectar-post-grid-item”div的内容，以查看是否存在类为“PostGridItemTrans”的元素-如果不存在，则添加它...

$(".nectar-post-grid-item").each(function() {
  
  if($(this).children('img.PostGridItemTrans').length == 0) {
  
  $(".nectar-post-grid-item").prepend("<img src='/wp-content/themes/salient-child/images/aspectTrans.png' class='PostGridItemTrans' alt='' />");
  
  }
  
  });

HTML语言

<div class="nectar-post-grid-item">
</div>
<div class="nectar-post-grid-item">
</div>
<div class="nectar-post-grid-item">
</div>

然后会变成

<div class="nectar-post-grid-item">
<img src='/wp-content/themes/salient-child/images/aspectTrans.png' class='PostGridItemTrans' alt='' />
</div>
<div class="nectar-post-grid-item">
<img src='/wp-content/themes/salient-child/images/aspectTrans.png' class='PostGridItemTrans' alt='' />
</div>
<div class="nectar-post-grid-item">
<img src='/wp-content/themes/salient-child/images/aspectTrans.png' class='PostGridItemTrans' alt='' />
</div>

但是在点击 AJAX 加载更多按钮后，我得到了更多的emppy <div class=""></div>

<div class="nectar-post-grid-item">
<img src='/wp-content/themes/salient-child/images/aspectTrans.png' class='PostGridItemTrans' alt='' />
<img src='/wp-content/themes/salient-child/images/aspectTrans.png' class='PostGridItemTrans' alt='' />
</div>
<div class="nectar-post-grid-item">
<img src='/wp-content/themes/salient-child/images/aspectTrans.png' class='PostGridItemTrans' alt='' />
<img src='/wp-content/themes/salient-child/images/aspectTrans.png' class='PostGridItemTrans' alt='' />
</div>
<div class="nectar-post-grid-item">
<img src='/wp-content/themes/salient-child/images/aspectTrans.png' class='PostGridItemTrans' alt='' />
<img src='/wp-content/themes/salient-child/images/aspectTrans.png' class='PostGridItemTrans' alt='' />
</div>

$.ajax({ dataType: "json", url: "somewhere.com/your/backend/uri", success: function (json) { // Maybe something like this let html; $.each(json, function(i, item) { html += '<div class="nectar-post-grid-item">' + ... item ... something ... '</div>'; }); // So now you have a new chunk of HTML to add to the DOM $("#something").prepend(html); } });

$.each(json, function(i, item) { // Add a dummy class we can use to identify new items html += '<div class="new nectar-post-grid-item">' + ... item ... something ... '</div>'; });

1条答案

按热度按时间

tag5nh1u1#

你尝试的方法应该是好的，你只需要在前置时瞄准 current 匹配的元素，而不是所有的元素。工作片段-每个div只得到1个图像：
第一个
这里是我在讨论上述想法之前编写的另一种方法。您还没有向我们展示添加div的代码，这可能是解决这个问题最简单的地方。我将使用一些伪代码--假设您从后端获得JSON响应，并且在success回调中生成并插入新的HTML。类似于：

因为您添加的div与您的ajaxComplete()中的选择器匹配，所以它们将获得新的图像，但是之前的div与该选择器匹配也会获得新的图像。每次您单击按钮时，图像将在已经有图像的div中重复。
因此，您需要区分新的div和任何现有的div。您不能使用父选择器（在我上面的伪代码中为#something），因为下一个集合也将添加到其中。因此，包含一个类来标识它们如何？更新 AJAX success处理程序，以执行以下操作：

现在，在ajaxComplete()中，您可以只将new元素作为目标，并且一旦处理完毕，就删除new类，这样它们下次就不会匹配了：

$(".new.nectar-post-grid-item")
    .prepend("<img src='your-image' class='PostGridItemTrans'/>")
    .removeClass('new');

赞(0）回复(0）举报 2022-11-22

jquery 插入图像重复问题

1条答案

相关问题

热门标签

最新问答

jquery 插入 图像 重复 问题

1条答案

相关问题

热门标签

最新问答

jquery 插入图像重复问题