Question

我想使用jQuery wrap并希望实现结果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>添加到此表

更新你的小提琴：

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

请注意，我添加了一些内容只是为了让结果更加明显：

表格边框
文字'square'

您需要为您的版本删除这些： - ）

jQuery模糊地包裹着。如何获得正确的结果html结构？

1 个答案: