Grouping Siblings into a div

Question

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 company. I would do away with this whole system but the client is rather attached to it and this is what they want.

Here is what I have to work with:

<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>
             </div>
         </td>
         <td class="ProductSpacer"><div></div></td>
         <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>
             </div>
         </td>
    </tr>
</tbody>

I am attempting to organize the content in a more visual appealing way so I would like to vertically align the images to the bottom as the client has a lot of images with varying heights that have already been uploaded to the system (1000's). Then vertically align the text to the top after giving it a set height, as some of the names of the products are single line and others are multiple lines. However, in order to do this I need the content to be in it's own div. I have attempted several different jQuery solutions but none have worked.

Output:

<tbody>
    <tr>
        <td class="Product">
            <div class="ProductWrapper">
                <a class="ProductThumb" href="#">
                    <img src="#" />
                </a>
                <div class="ProductInfo">
                    <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>
                </div>
             </div>
         </td>
         <td class="ProductSpacer"><div></div></td>
         <td class="Product">
            <div class="ProductWrapper">
                <a class="ProductThumb" href="#">
                    <img src="#" />
                </a>
                <div class="ProductInfo">
                    <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>
                </div>
             </div>
        </td>
    </tr>
</tbody>

The closest solution I have gotten was the following:

$(".ProductThumb").nextUntil('td').wrapAll("<div class='ProductInfo'>");

However, this code removes all of the information from every product listing on the page and puts it under the first one. I would also like to note that I only have access to place jQuery within the head of the html.

~~~~~~~~~~~~~

[Edit 1:] I fixed the display of the code. I would also like to clarify a few things:

First, the last line of the code " is supposed to represent that a duplicate of the previous TD. I apologize for not clarifying.

Secondly, I would like to reiterate that I can not edit the HTML what so ever.

Finally, I am attempting to divide the data in the TD's. First, The anchor tag holding the image. Then, the rest of the data (name, in stock, price ...) in a div.

So:

<a class="ProductThumb"> ... </a>
<div class="ProductInfo"> ... </div>

I would also like to thank you all for the help and the speedy responses.

Answer 1

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

Answer 2

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