将兄弟组合成一个div [英] Grouping Siblings into a div

问题描述

我正在为一家使用非常奇怪的电子商务解决方案的公司工作。我没有直接访问由该特定公司托管的电子商务商店的代码。我会放弃整个系统，但客户端很重视它，而这正是他们想要的。

以下是我必须处理的内容：

 < tbody> 
< tr> 
< td class =Product> 
< div class =ProductWrapper> 
< a class =ProductThumbhref =＃> 
< img src =＃/> 
< / a> 
< a class =ProductNamehref =＃>示例< / a> 
< meta itemprop =namecontent =Example=> 
< div class =Status> 
< link href =＃> ; 
有货
< / div> 
< div class =Price> 
< b> $ 0.00< / b> 
< meta itemprop =priceCurrencycontent =USD> 
< / div> 
< / div> 
< / td> 
< td class = ProductSpacer>< div>< / div>< / td> 
< td class =Product> 
< div class =ProductWrapper> 
 < a class =ProductThumbhref =＃> 
< img src =＃/> 
< / a> 
< a class = href =＃>示例< / a> 
< meta itemprop =namecontent =Example=> 
< div class =Status> 
< link href =＃> 
有货
< / div> 
< div class =Price> 
< b> $ 0.00< / b> 
< meta itemprop =priceCurrencycontent =USD> 
< / div> 
< / div> 
< / td> 
< / tr> 
< / tbody> 
  

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

输出：

 < TBODY> 
< tr> 
< td class =Product> 
< div class =ProductWrapper> 
< a class =ProductThumbhref =＃> 
< img src =＃/> 
< / a> 
< div class =ProductInfo> 
< a class =ProductNamehref =＃>示例< / a> 
< meta itemprop =namecontent =Example=> 
< div class =Status> 
< link href =＃> ; 
有货
< / div> 
< div class =Price> 
< b> $ 0.00< / b> 
< meta itemprop =priceCurrencycontent =USD> b $ b< b $ b< td class =ProductSpacer>< div>< / div>< / td> 
< td class =Product> 
< div class = ProductWrapper> 
< a class =ProductThumbhref =＃> 
< img src =＃/> 
< / a> 
< div class =ProductInfo> 
< a class =ProductNamehref =＃>实施例< / A> 
< meta itemprop =namecontent =Example=> 
< div class =Status> 
< link href =＃> ; 
有货
< / div> 
< div class =Price> 
< b> $ 0.00< / b> 
< meta itemprop =priceCurrencycontent =USD> b $ b< b $ b< / tr> 
< / tbody> 
  

（'。td'）。wrapAll（< / p>）。但是，这段代码将所有的信息从所有的信息中删除每个产品都列在页面上，并将其放在第一个下面。我还想说明一下只有在html头部才能访问jQuery。

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

<编辑1：]我修复了代码的显示。我还想澄清一些事情：

首先，代码的最后一行应该表示前一个TD的重复，我为澄清。

其次，我想重申一下，我无法编辑HTML以至于如此。

最后，我试图在TD中分割数据，首先是保存图像的锚标签，然后是其余数据（名称，库存，价格...）在div中。

因此：

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

我也要感谢大家的帮助和快速回复。 解决方案

试试看：包装你的选择器的内容：

  $（。ProductThumb）。parent（）。wrapinner（< div class ='ALLNEW'>）; 
  

甚至更简单：

<$ （。< div class ='ALLNEW'>）;

编辑：
如果您想排除所有锚点和您可以使用：not（）过滤器并更改逻辑位：

  $（。ProductWrapper）。children（：not（a，img））。wrapAll（< div class ='ALLNEW'>）; 
  

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.

解决方案

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

这篇关于将兄弟组合成一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！