如何在不更改 position 的情况下将 div 和 dl 包装在 js 中

Question

I have been messing with creating a site (with shopify) and want to create a box-shadow under two elemtens which occur more than one time on the site. Creating a wrapper div is not working.

I tried working with wrap and wrapAll but my results are, that wrap is wrapping the 2 divs but displaying a dropshadow underneath each element, while WrapAll wraps all elemtns and positions them in one giant div.

I am new to css and js but my guess is to

1. loop over the parent divs
2. get the 2 child divs
3. wrap them via wrapall but i dont know how.

<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 code wraps all into a single big div)

Thank you for any answers.

Answer 1

You can replace the code

like this:

<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>');

and for box shadow you can give shadow to .product-card