使用jQuery管理td

我有以下html结构。使用jQuery管理td

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

请不要要紧

来源

2011-03-22 Wasim Shaikh

您可以使用'innerHtml'来更改''标签中的内容。 – Kushal 2011-03-22 10:04:35

你为什么不改变TD的课程？ – JohnnyBizzle 2011-03-22 10:04:36

使用jQuery你可以在下面的使用做功能wrapInner。

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

来源

2011-03-22 10:06:21 Swaff

这效果很好，谢谢。 – 2011-03-28 10:29:04

可以使用wrapAll

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

编辑：由于一些评论，它的工作原理：jsFiddle

来源

2011-03-22 10:03:30 felixsigl

我个人会一直跑到上面felixsigl的回答，但看到你的<TD>的编号，我假设这些实际上是编号和重复你的页面上。如果是这样的话，我们将不得不多建立在他的答案上。

以下代码：

包装一个<TD>的孩子用<DIV>元件的规定，而
分配用于<DIV>对应于父<TD>编号类的类。（即COLL-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

来源

2011-03-22 12:24:45

使用jQuery管理td

回答

相关问题