jQuery add first part of div, then add last part of div seperatley

Question

I'm trying to wrap the following prices and text together, all in one div.

This is what I have:

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

This is what I am trying to get:

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

This doesn't work but you get the idea of what I'm doing wrong:

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

Perhaps I should be using SLICE?

could you please explain more about how you want the output to be like ? — Dhiraj, May 10 '11 at 20:31
Sure, I just want to WRAP the first font tag and B tag together in a div..in this example with class 'pricebox'. — ToddN, May 10 '11 at 20:34

Mark Coleman · Accepted Answer · 2011-05-10T21:55:02.837

5

I think what you want is .wrapAll()
Updated, to use .andSelf() to include <font/>

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

Example on jsfiddle

edited May 10 '11 at 21:55

answered May 10 '11 at 20:31

Mark Coleman

40,542
9
81
101

Nice tip, I wasn't aware of `nextUntil` so I didn't think `wrap` could be used for this. – Brad Mace May 10 '11 at 20:34
This now just wraps the Product Price part not the MSRP part in it. – ToddN May 10 '11 at 20:35
@Mark This doesn't work correctly for me. I need it to wrap the first FONT tag also and it is just wrapping the first B tag under the TD? – ToddN May 10 '11 at 20:46
@ToddN, see update and fiddle, added `.andSelf()` to include the first element. – Mark Coleman May 10 '11 at 20:58
@Mark this is much closer, but I don't want the A tag in the div. Is there a way to get it without the A tag wrapping in it? – ToddN May 10 '11 at 21:06
@ToddN, i think i got it now, see fiddle. – Mark Coleman May 10 '11 at 21:55

score 0 · Answer 2 · answered May 10 '11 at 21:13

0

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

Uses slice() to slice the first 3 children before wrapping them, note a <br> is a child if you want to wrap the br before the a change the 3 to 4

answered May 10 '11 at 21:13

clairesuzy

27,296
8
54
52

jQuery add first part of div, then add last part of div seperatley

2 Answers2