Manupulate td using jQuery

I have the following html structure.

<td class="coll-1">
   <b><a href="#">Some link text</a></b>
   <p>Description lorem ipsum dolor sit amet consect</p>
</td>

And I want to make something like this using jQuery. I can not modify the code so have to use this.

<td class="coll-1">
   <div class="col-1-data">
     <b><a href="#">Some link text</a></b>
     <p>Descrip开发者_JS百科tion lorem ipsum dolor sit amet consect</p>
   </div>
</td>

Please do needful

---

you can use wrapAll

$("td.coll-1 *").wrapAll('<div class="col-1-data" />');

edit: due to some comments, it works: jsFiddle

---

Using jQuery you can do the following using the wrapInner function.

$(".coll-1").wrapInner("<div class='col-1-data' />");

---

I personally would've went with felixsigl's answer above, but seeing that your <TD>'s are numbered, I'm assuming that these are actually numbered and repeated on your page. If that is the case, we'll have to build on his answer a bit more.

The following code:

1. wraps a <TD>'s children with a <DIV> element as specified, and
2. assigns a numbered class for the <DIV> corresponding to the parent <TD>'s class. (i.e. coll-2 => col-2-data)

Code:

    $('td[class^="coll-"]').each(function() {

        var el = $(this);
        var num = el.attr('class').split('-')[1];

        el.children().wrapAll('<div class="col-'+num+'-data" />');

    });

I'll see what I can do with simplifying it, but this currently works fine. updated jsFiddle