Use jQuery to wrap a div around a group of td's

Question

Here is the example code I am working on:

<td class="one">content</td>
<td class="two">content</td>
<td class="three">content</td>
<td class="four">content</td>
<td class="five">content</td>

I am able to wrap a div around the first td using:

$('td.one').wrap('<div class="td-one">');

However, I now need to wrap the remaining four td's in a single div...so the desired outcome is:

<div class="td-one">
    <td class="one">content</td>
</div>
<div class="td-two-five">
    <td class="two">content</td>
    <td class="three">content</td>
    <td class="four">content</td>
    <td class="five">content</td>
</div>

How would I do this with jQuery?

Answer 1

The convention is to mark each cell with a class which will act as a wrapper given the convenience of jQuery selectors.

<td class="td-one one">content</td>
<td class="td-two-five two">content</td>
<td class="td-two-five three">content</td>
<td class="td-two-five four">content</td>
<td class="td-two-five five">content</td>

Then as needed you can work with groups of cells.

$(".td-two-five").hide();