jquery - 使用 jQuery 将 div 包裹在一组 td 周围

Question

这是我正在处理的示例代码：

<td class="one">content</td>
<td class="two">content</td>
<td class="three">content</td>
<td class="four">content</td>
<td class="five">content</td>

我可以使用以下方法将 div 包裹在第一个 td 周围：

$('td.one').wrap('<div class="td-one">');

但是，我现在需要将剩余的四个 td 包装在一个 div 中......所以想要的结果是：

<div class="td-one">
    <td class="one">content</td>
</div>
<div class="td-two-five">
    <td class="two">content</td>
    <td class="three">content</td>
    <td class="four">content</td>
    <td class="five">content</td>
</div>

我将如何使用 jQuery 来做到这一点？

Answer 1

约定是用一个类标记每个单元格，该类将作为一个包装器，因为 jQuery 选择器很方便。

<td class="td-one one">content</td>
<td class="td-two-five two">content</td>
<td class="td-two-five three">content</td>
<td class="td-two-five four">content</td>
<td class="td-two-five five">content</td>

然后根据需要，您可以使用细胞组。

$(".td-two-five").hide();

Answer 2

假设，为了有效的 HTML，您使用的是div元素而不是td元素，我建议：

<div class="one">content</div>
<div class="two">content</div>
<div class="three">content</div>
<div class="four">content</div>
<div class="five">content</div>

$('div.one').wrap('<div class="cell-one" />').parent('div').siblings().wrapAll('<div class="cell-two-five" />')​​​​​​​​​​​​​​​​​​

JS 小提琴演示。