Grouping Siblings Into A Div

I am working for a company that is using a very oddly coded ecommerce solution. I do not have direct access to the code of the ecommerce store as it is hosted by that specific comp

Solution 1:

try this

HTML

<table>
<tbody>
    <tr>
        <td class="Product">
            <div class="ProductWrapper">
                <a class="ProductThumb" href="#">
                    <img src="#" />
                </a>
                <a class="ProductName" href="#">Example</a>
                <meta itemprop="name" content="Example""="">
                <div class="Status">
                    <link href="#">
                    In Stock
            </div>
                <div class="Price">
                    <b>$0.00</b>
                    <meta itemprop="priceCurrency" content="USD">
            </div>
         </td>
         <td class="ProductSpacer"><div></div></td>
         <td class="Product"></td>
</tr>
</tbody>
</table>

JS CODE

$(".ProductThumb").siblings('.Price').wrapAll("<div class='ALLNEW' />");

LIVE DEMO

Solution 2:

Try it like that: wrap the content of your selector:

$(".ProductThumb").parent().wrapinner("<div class='ALLNEW'>");

Or even simpler:

$(".ProductWrapper").wrapinner("<div class='ALLNEW'>");

Edit: If you want to exclude all anchor and image tags you can use the :not() filter and change the logic a bit:

$(".ProductWrapper").children(":not(a, img)").wrapAll("<div class='ALLNEW'>");