如何用JS包裹Shopify产品卡片的div与dl且不改变布局

嘿，我完全懂你的困扰！你想给每个产品卡片里的标题和价格这一组元素加个统一的阴影，但之前用wrap会单独包裹每个元素、wrapAll又把所有元素塞进一个大盒子里，都不是你要的效果对吧？别慌，咱们一步步来解决这个问题。

问题根源 #

你之前写的代码：

$('.product-card__title,.price--listing').wrap('<div class="child"></div>');

会给每个匹配的元素单独套一个child div；而如果用wrapAll的话，会把页面上所有的标题和价格都塞进同一个大child div里，这显然不符合每个产品卡片独立分组的需求。

我们真正需要做的是：针对每个产品卡片，单独把它内部的标题和价格元素打包在一起。

解决方案代码 #

直接用这段代码就能实现你的需求：

// 确保DOM加载完成后再执行代码
$(document).ready(function() {
  // 遍历每一个产品卡片容器
  $('.product-card').each(function() {
    // 在当前卡片里找到标题和价格元素，一起包裹进child div
    $(this).find('.product-card__title, .price--listing').wrapAll('<div class="child"></div>');
  });
});

代码解释（给新手的友好说明） #

• $(document).ready(...)：确保页面上所有元素都加载完成后再执行JS，避免找不到元素的问题。
• $('.product-card').each(function() { ... })：逐个处理页面上的每个产品卡片，this在这里就代表当前正在处理的那个产品卡片。
• $(this).find(...)：只在当前这个产品卡片内部查找标题和价格元素，不会涉及其他产品的元素，这是实现分组的关键！
• wrapAll('<div class="child"></div>')：把当前卡片里找到的两个元素一起包裹到新的child div里，这样每个产品卡片都会有自己独立的阴影容器。

最后添加上阴影样式 #

现在你只需要给child类加CSS阴影就可以了：

.child {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* 柔和的灰色阴影，可按需调整参数 */
  padding: 8px 12px; /* 可选：加内边距让阴影和内容之间更协调 */
  border-radius: 4px; /* 可选：给容器加圆角，视觉效果更柔和 */
}

注意事项（Shopify专属） #

把JS代码放到你Shopify主题的自定义JS文件里（比如theme.js或者custom.js），或者在页面的footer区域添加<script>标签来执行这段代码，确保代码能正常运行。

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