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

Question

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

这是我必须处理的：

<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 解决方案，但都没有奏效。

输出：

<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 的头部。

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

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

首先，代码的最后一行 " 应该代表之前 TD 的副本。我很抱歉没有澄清。

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

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

所以：

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

我还要感谢大家的帮助和快速响应。

Answer 1

试试这个

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

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

LIVE DEMO

Answer 2

尝试这样：包装选择器的内容：

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

甚至更简单：

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

编辑： 如果您想排除所有锚点和图像标签，您可以使用:not() 过滤器并稍微更改逻辑：

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