Question

我有一些像这样的HTML？

<article class="post">
    <table border="1" cellspacing="0" cellpadding="0">
      <tbody>
        <tr>
          <td width="368" valign="top"><p> ONDERDEEL</p></td>
          <td width="350" valign="top"><p> BEGELEIDER/VERANTWOORDELIJKE</p></td>
        </tr>
        <tr>
          <td width="368" valign="top"><p> Evaluatiemomenten</p></td>
          <td width="350" valign="top"><p> P-manager</p></td>
        </tr>
      </tbody>
    </table>
</article>

我需要的是获取文章中的所有表格并用新的.jobs-table包装它然后最终的HTML必须看起来像这样

<article class="post">
  <div class="jobs-table">
    <table border="1" cellspacing="0" cellpadding="0">
      <tbody>
        <tr>
          <td width="368" valign="top"><p> ONDERDEEL</p></td>
          <td width="350" valign="top"><p> BEGELEIDER/VERANTWOORDELIJKE</p></td>
        </tr>
        <tr>
          <td width="368" valign="top"><p> Evaluatiemomenten</p></td>
          <td width="350" valign="top"><p> P-manager</p></td>
        </tr>
      </tbody>
    </table>
  </div>
</article>

所有这一切我必须通过jquery做，因为我使用CMS并且用户想要cms控制样式，问题是我可以通过css做这个，因为用户通过tinymce输入内容，这样他控制外观，只想要表是完全一样的

现在我有jquery

$("table").removeAttr("style");
$("td").removeAttr("width");

Answer 1

使用.wrap() - 围绕匹配元素集中的每个元素包装HTML结构。

试试这个

$('article.post').wrap( "<div class='jobs-table'></div>" );

DEMO

Answer 2

包裹它：

$('.post table').each(function(){
   $('.post').wrap('<div class="jobs-table" />');
});

Answer 3

wrap方法通过div抓取你的表

$('table').wrap("<div class='jobs-table'></div>");

得到元素的孩子和包裹？

3 个答案: