如何在不更改 position 的情況下將 div 和 dl 包裝在 js 中

Question

我一直在搞亂創建一個站點（使用 shopify），並希望在站點上不止一次出現的兩個元素下創建一個盒子陰影。 創建包裝器 div 不起作用。

我嘗試使用 wrap 和 wrapAll 但我的結果是，該 wrap 包裝了 2 個 div，但在每個元素下方顯示了一個陰影，而 WrapAll 包裝了所有 elemtns 並將它們放置在一個巨大的 div 中。

我是 css 和 js 的新手，但我的猜測是

1. 循環遍歷父 div
2. 獲取 2 個子 div
3. 通過 wrapall 包裝它們，但我不知道如何。

<div class="grid-view-item product-card">
    <div class="h4 grid-view-item__title product-card__title" aria-hidden="true">Testproduct</div>
    <dl class="price price--listing">...</dl>
</div>
        
$('.product-card__title,.price--listing').wrap('<div class="child"></div>');

（js 代碼全部封裝到一個大 div 中）

謝謝你的任何答案。

Answer 1

您可以替換代碼

像這樣：

<div class="grid-view-item product-card">
        <div class="inner">
            <div class="h4 grid-view-item__title product-card__title" aria-hidden="true">Testproduct</div>
            <dl class="price price--listing">...</dl>
        </div>
    </div>
    $('.inner').wrap('<div class="product-card-inner"></div>');

對於盒子陰影，您可以為.product-card提供陰影