javascript - jQuery 模糊地换行。如何获得正确的html结果结构？

Question

我想使用 jQuery 换行并希望实现如下所示的结果 html 结构:

<table>
<tr>
    <td class="squares"></td>
</tr>
<tr>
    <td class="target">
        <span id="test">some content<span>
    </td>
</tr>
</table>

这是我的代码:

$("#test").wrap('<table><tr><td class="squares"></td></tr><tr><td class="target"></td></tr><table>');

但结果却截然不同:

<table><tr><td class="squares"><span id="test">some content<span>
</span></span></td></tr><tr><td class="target"></td></tr></table>

如何获得所需的行为？这是 jsfiddle 链接:

http://jsfiddle.net/y6L7n6Lj/

Answer 1

你可以这样做:

$("#test").wrap('<table border="1"><tr><td class="target"></td></tr><table>')
    .closest("table")
    .prepend('<tr><td class="squares">squares</td></tr>');

说明:

• 将您的测试范围包装在仅包含一个最内部元素的 HTML 结构中，正如 Frederic 在评论中指出的那样
• 遍历新包装的结构以找到顶部的表格
• 添加额外的 <tr>进入此表

更新你的 fiddle :

http://jsfiddle.net/y6L7n6Lj/2/

请注意，我添加了一些内容只是为了使结果在 fiddle 中更加明显:

1. 表格边框
2. 文本“正方形”

您需要为您的版本删除这些:-)