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

使用jQuery，您可以使用wrapInner函数执行以下操作。

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

Answer 2

您可以使用wrapAll

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

编辑：由于一些评论，它是有效的：jsFiddle

Answer 3

我个人会同意felixsigl上面的答案，但看到你的<TD>是有编号的，我假设这些都是编号的，并在你的页面上重复，如果是这样的话，我们将不得不在他的答案上做更多的工作。

以下代码：

1. 使用指定的<DIV>元素包装<TD>的子类，而
2. 为与父数据的类相对应的<DIV>分配一个编号类。(即coll-2 => col-2-data)

代码：

    $('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