jQuery添加div的第一部分，然后分别添加div的最后一部分答案

【问题标题】：jQuery add first part of div, then add last part of div seperatleyjQuery添加div的第一部分，然后分别添加div的最后一部分
【发布时间】：2011-08-22 19:09:41
【问题描述】：

我正在尝试将以下价格和文本打包在一起，全部合二为一div。

这就是我所拥有的：

<table cellspacing="0" cellpadding="0" border="0" class="thePrices">
  <tbody>
    <tr>
      <td>
        <font class="text colors_text">
          <b>MSRP: <span class="priceis">$90.00</span></b>
        </font><br>
        <b><font class="pricecolor colors_productprice">
                     <font class="text colors_text"><b>Burkett Price:</b></font>
        <span class="priceis">$289<sup>.99</sup></span>
        </font>
        </b><br>
        <a href="a link">A link goes here</a>
        <table>A TABLE WITH STUFF GOES HERE</table>
      </td>
    </tr>
  </tbody>
</table>

这就是我想要得到的：

<table cellspacing="0" cellpadding="0" border="0" class="thePrices">
  <tbody>
    <tr>
      <td>
        **
        <div class="pricebox">**
          <font class="text colors_text">
            <b>MSRP: <span class="priceis">$90.00</span></b>
          </font><br>
          <b><font class="pricecolor colors_productprice">
                         <font class="text colors_text"><b>Burkett Price:</b></font>
          <span class="priceis">$289<sup>.99</sup></span>
          </font>
          </b><br> **
        </div>**
        <a href="a link">A link goes here</a>
        <table>A TABLE WITH STUFF GOES HERE</table>
      </td>
    </tr>
  </tbody>
</table>

这不起作用，但你知道我做错了什么：

$(document).ready(function () {
$('.thePrices').find('td').find('font:first').before('<div class="pricebox">');
$('.thePrices').find('.colors_productprice').find('b').after('</div>');
});

也许我应该使用 SLICE？

【问题讨论】：

能否请您详细解释一下您希望输出是什么样的？
当然，我只想将第一个字体标签和 B 标签一起包装在一个 div 中。在这个示例中，使用类 'pricebox'。

标签： javascript jquery html add wrapall

【解决方案1】：

我认为你想要的是.wrapAll()
更新，使用.andSelf() 包含<font/>

$('.thePrices').find('td').children().first().nextUntil('a').andSelf().wrapAll('<div class="pricebox"></div>');

Example on jsfiddle

【讨论】：

不错的提示，我不知道nextUntil 所以我认为wrap 不能用于此。
现在只包含 Product Price 部分而不是 MSRP 部分。
@Mark 这对我来说不能正常工作。我还需要它来包装第一个 FONT 标签，它只是将第一个 B 标签包装在 TD 下？
@ToddN，请参阅更新和小提琴，添加 .andSelf() 以包含第一个元素。
@Mark 这更接近，但我不希望 div 中的 A 标记。有没有办法在不包含 A 标签的情况下获取它？

【解决方案2】：

$('.thePrices>tbody>tr>td').children().slice(0,3).wrapAll('<div class="pricebox"></div>');

在包装前使用slice() 对前3 个孩子进行切片，注意<br> 是一个孩子，如果您想在a 之前包装br，请将3 更改为4

【讨论】：