将兄弟姐妹分组到一个 div 中

我在一家公司工作，该公司使用编码非常奇怪的电子商务解决方案。我无法直接访问电子商务商店的代码，因为它是由该特定公司托管的。我会废除整个系统，但客户相当依恋它，这就是他们想要的。

这是我必须处理的内容：

<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>

我正在尝试以更具视觉吸引力的方式组织内容，因此我想将图像垂直对齐到底部，因为客户端有很多不同高度的图像已经上传到系统（1000 张）。然后在给定高度后将文本垂直对齐到顶部，因为有些产品名称是单行，有些是多行。但是，为了做到这一点，我需要将内容放在它自己的 div 中。我尝试了几种不同的 jQuery 解决方案，但没有一个有效。

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>

我得到的最接近的解决方案如下：

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

但是，此代码会删除页面上每个产品列表中的所有信息，并将其放在第一个产品下。我还想指出，我只能将 jQuery 放置在 html 的 head 中。

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

[编辑1：]我修复了代码的显示。我还想澄清几点：

首先，代码的最后一行“应该代表前一个 TD 的副本。对于没有澄清，我深表歉意。

其次，我想重申我无法编辑 HTML。

最后，我尝试划分 TD 中的数据。首先，保存图像的锚标记。然后，将其余数据（名称、库存、价格...）放在 div 中。

So:

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

我还要感谢大家的帮助和快速回复。

try this

HTML