如何将每个商品项内的Add to Cart按钮移至对应图片容器？

你的问题出在代码会一次性选中所有.button元素，并把它们追加到每一个.product-image容器里，导致每个图片容器都包含所有商品的按钮。要实现每个商品的按钮只移到自己所属的图片容器，可以用以下两种方式解决：

方法一：遍历每个商品项处理 #

通过.each()遍历每个.product元素，在每个商品内部单独找到对应的按钮和图片容器，完成迁移：

jQuery(document).ready(function(){
  jQuery(".product").each(function(){
    const $currentButton = jQuery(this).find('.button');
    jQuery(this).find('.product-image').append($currentButton);
  });
});

方法二：利用append的函数参数简化代码 #

jQuery的.append()支持传入函数，函数内部可以基于当前元素（这里是每个.product-image）定位到对应商品里的按钮：

jQuery(document).ready(function(){
  jQuery(".product-image").append(function(){
    return jQuery(this).closest('.product').find('.button');
  });
});

两种方法的核心逻辑一致：都是针对单个商品项做局部操作，确保每个按钮只被移动到它所属的商品图片容器中，不会出现重复按钮的问题。

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