jQueryを使用してtdを手直し

Question

私は以下のhtml構造を持っています。

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

そして、私はjQueryを使ってこのようなものを作りたいと思います。私はコードを変更することはできませんので、これを使用する必要があります。

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

はニードフル

Answer 1

は、次の使用を行うことができますwrapInner機能です。

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

Answer 2

あなたが使用することができませんしてくださいwrapAll

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

編集：いくつかのコメントに、それが動作するためは：jQueryのを使用してjsFiddle

Answer 3

私は個人的には上記felixsiglの答えと一緒に行っただろうが、あなたの<TD>年代の番号が付けられていることを見て、私は、これらが実際にあなたのページに番号が付けられ、繰り返されていることを想定しています。そうであれば、彼の答えをもう少し構築する必要があります。

以下のコード： 'の指定、及び

親<TD>に対応<DIV>ための番号クラスを割り当てるよう<DIV>要素との子供クラス

1. は<TD>をラップ。 （すなわち、コル-2 => COL-2データ）

コード：

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

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

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

    }); 

私はそれを簡素化で何ができるかわかりますが、これは現在正常に動作します。 updated jsFiddle