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

您可以使用wrapAll

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

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

Answer 2

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

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

Answer 3

我个人会在上面找到felixsigl的答案，但是看到你的<TD>被编号，我假设这些已经在你的页面上编号并重复了。如果是这样的话，我们将不得不在他的答案上再多做一点。

以下代码：

将<TD>个孩子包含指定的<DIV>元素，并
为与父<DIV>类对应的<TD>分配编号的类。（即coll-2 =＆gt; 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

使用jQuery操作td

3 个答案: