求助:使用jQuery prependTo将元素插入兄弟元素的代码修正
修正后的jQuery代码及问题解析
首先,你的原始代码存在一个小问题:当页面上有多个商品项时,所有的.quant a.button元素会被一次性插入到所有.portfolio_item_hover .item_info span.price元素中,或者全部堆到第一个价格元素里,这显然不是你想要的一对一对应效果。
我们需要遍历每个按钮,找到它所属的商品项容器,再将其插入到对应商品的价格元素中,代码如下:
$(document).ready(function(){ // 遍历每个"加入购物车"按钮 $('.quant a.button').each(function() { // 找到当前按钮所在的商品项容器 var $currentItem = $(this).closest('.portfolio_item_hover'); // 在该商品项内找到对应的价格元素 var $targetPrice = $currentItem.find('.item_info span.price'); // 将当前按钮插入到价格元素的开头位置 $(this).prependTo($targetPrice); }); });
关键修正点说明:
- 使用
.each()遍历每个按钮,确保每个按钮都单独处理,实现一对一的对应关系 - 用
.closest('.portfolio_item_hover')定位按钮所属的商品容器,避免跨商品操作错误 - 用
.find()在当前商品容器内查找价格元素,确保目标元素是当前商品的对应元素
额外提示:
如果你的DOM结构和预期不同(比如.quant的父级不是.portfolio_item_hover),可以调整.closest()的选择器,比如改成$(this).closest('.your-item-container-class'),只要能准确找到当前按钮所在的商品容器即可。
内容的提问来源于stack exchange,提问作者Samuel Liska
相关产品推荐
相关产品推荐

