JQuery注入图片重复问题：AJAX加载后重复添加图片的解决需求

核心问题分析 #

你遇到的重复注入，本质是每次AJAX加载后，代码重新遍历了所有.nectar-post-grid-item元素，包括已经处理过的旧元素。之前的存在性判断失效，大概率是选择器逻辑有漏洞，或者图片元素还未完全渲染导致判断不准确。

可行解决方法 #

方法1：只对AJAX新增的元素进行处理

这是最直接的方案，避免重复遍历旧元素。如果你的AJAX请求返回的是包含新元素的HTML，直接在回调中提取这些新增元素进行处理：

$.ajax({
  url: '你的加载更多接口地址',
  method: 'GET',
  success: function(html) {
    // 从返回的HTML中筛选出新的网格项
    var $newItems = $(html).find('.nectar-post-grid-item');
    // 把新元素添加到页面容器
    $('.post-grid-container').append($newItems);
    // 只给这些新元素注入图片
    $newItems.each(function() {
      $(this).append('<img class="PostGridItemTrans" src="你的图片地址">');
    });
  }
});

如果无法直接从返回值中提取新增元素，也可以给已处理的元素打个标记类，每次只处理未标记的：

function injectPostGridImages() {
  // 只选择未处理过的网格项
  $('.nectar-post-grid-item:not(.image-injected)').each(function() {
    $(this).append('<img class="PostGridItemTrans" src="你的图片地址">');
    // 添加标记类，避免后续重复处理
    $(this).addClass('image-injected');
  });
}

// 初始页面加载时执行
$(document).ready(function() {
  injectPostGridImages();
});

// AJAX加载更多后的回调中执行
function loadMoreCallback() {
  injectPostGridImages();
}

方法2：修复存在性判断逻辑

如果坚持用判断图片是否存在的方式，确保选择器准确，并且用length属性来判断（这是jQuery中检查元素是否存在的标准方式）：

function injectPostGridImages() {
  $('.nectar-post-grid-item').each(function() {
    var $item = $(this);
    // 准确检查当前元素内是否已存在目标图片
    if (!$item.find('.PostGridItemTrans').length) {
      $item.append('<img class="PostGridItemTrans" src="你的图片地址">');
    }
  });
}

注意：如果图片是动态加载的（比如用了懒加载），可能需要确保判断时机在图片元素已经插入DOM之后，否则会导致判断失效。

额外提示 #

• 避免使用全局的$('.nectar-post-grid-item')遍历，尤其是在AJAX回调中，优先处理新增元素。
• 标记类的方式比判断子元素更可靠，因为它不受子元素加载状态、类名变更的影响。

内容的提问来源于stack exchange，提问作者dubbs