jQuery使用each方法追加img到对应grand-child1节点失效求解

AI 小北

2026-8-28

jQuery实现指定img移动到对应span节点方案

原有代码问题分析

第一段代码$("img").appendTo(".grand-child1")的逻辑是：把页面所有匹配到的img元素，移动到所有匹配.grand-child1的节点中，因此会出现跨容器重复插入的问题，第三个无img的.main容器内也会被插入多余图片。
第二段each循环代码逻辑顺序完全错误：遍历对象已经是.main img时，this指向的就是当前img本身，再调用find('img')是在img内部查找子img，不可能匹配到内容；同时appendTo(this)是把内容插入到当前img内部，后续的.closest(".grand-child1")没有作为插入目标传入，完全不生效。

正确实现代码

如果要明确只处理前两个.main容器，直接用slice(0,2)截取前两个元素，所有DOM查找都限定在当前遍历的.main容器范围内，就不会出现跨容器串元素的问题：

// 取前两个.main容器遍历处理
$('.main').slice(0, 2).each(function() {
  // 在当前main容器内找到img，追加到同容器内的.grand-child1节点中
  $(this).find('img').appendTo( $(this).find('.grand-child1') );
});

如果要自动处理所有内部包含img的.main容器（不需要手动限制前两个，第三个没有img的容器会自动跳过），可以用:has()选择器实现：

$('.main:has(img)').each(function() {
  const $img = $(this).find('img');
  const $target = $(this).find('.grand-child1');
  $img.appendTo($target);
});