使用jquery在文本周围包装HTML结构

Question

我试图动态地将Achor标记包装到Email-id，我面临的问题是我的HTML代码：

<tr>
  <td id='label'>
    email
  </td>
  <td>
    <div>
      abc@gmail.com
    </div>
  </td>
</tr>

和我正在尝试的jquery代码将Achor标记包装到div：

$("tr td#label:contains('email')").next().each(function(){ 

   $(this).wrapInner('<a href="mailto:'+$(this).text()+'">');

});

我将Achor标签包装到Email-Id。我怎么能这样做？

Answer 1

首先修改标记以使用class代替id：

<tr>
  <td class='label'>
    email
  </td>
  <td>
    <div>
      abc@gmail.com
    </div>
  </td>
</tr>

脚本：

$(".label:contains('email')").each(function(){
    var email = $(this).closest('td').next('td').find('div').text();
    $(this).html('<a href="mailto:'+email+'">email</a>');
});