jquery - jQuery - 如何选择一个单元格及其前一个兄弟

Question

我有以下表结构。

<table>
    <tr>
        <td>ASDF</td>
        <td>ASDF</td>
        <td class="selectable">ASDF</td>
        <td>ASDF</td>
        <td>ASDF</td>
        <td>ASDF</td>
        <td class="selectable">ASDF</td>
        <td>ASDF</td>
        <td>ASDF</td>
    </tr>
    <tr>
        <td>ASDF</td>
        <td>ASDF</td>
        <td class="selectable">ASDF</td>
        <td>ASDF</td>
        <td>ASDF</td>
        <td class="selectable">ASDF</td>
        <td>ASDF</td>
        <td>ASDF</td>
        <td>ASDF</td>
    </tr>
</table>

我需要做的是克隆所有具有“可选择”类的单元格，并且它是前一个兄弟，并将克隆插入新行中。换句话说，我需要的结果是：

<table>
    <tr>
        <td>ASDF</td>
        <td>ASDF</td>
        <td class="selectable">ASDF</td>
        <td>ASDF</td>
        <td>ASDF</td>
        <td>ASDF</td>
        <td class="selectable">ASDF</td>
        <td>ASDF</td>
        <td>ASDF</td>
    </tr>
    <tr>
        <td>ASDF</td>
        <td class="selectable">ASDF</td>
        <td>ASDF</td>
        <td class="selectable">ASDF</td>
    </tr>
    <tr>
        <td>ASDF</td>
        <td>ASDF</td>
        <td class="selectable">ASDF</td>
        <td>ASDF</td>
        <td>ASDF</td>
        <td class="selectable">ASDF</td>
        <td>ASDF</td>
        <td>ASDF</td>
        <td>ASDF</td>
    </tr>
    <tr>
        <td>ASDF</td>
        <td class="selectable">ASDF</td>
        <td>ASDF</td>
        <td class="selectable">ASDF</td>
    </tr>
</table>

我可以使用以下方法成功克隆具有“可选”类的单元格。（我知道这不是有效的标记，因为缺少“TR”标签。只是试图尽可能缩短我的示例。）

$('tr').each(function(){
    $(this).after($(this).find('td.selectable').clone());
})

但是，我也无法弄清楚如何将前一个兄弟姐妹包含在克隆中。

谁能指出我正确的方向？

谢谢

Answer 1

您可以使用prev()获取前一个兄弟，然后addBack()将两者合并在一起。要插入新行，只需创建它，然后使用以下命令将合并的集合附加到其中append()：

$(this).after( $('<tr>').append( $(this).find('td.selectable').prev().addBack().clone() ) );

这是一个小提琴