javascript - jQuery - 将元素移动到 html 中的另一个位置

Question

如何使用 jQuery 将类为 collapse 的 DIV 移动到另一个位置？我想将它们从 TD 内部移动到 TR 之后。

我想更改以下内容:

<tbody>
    <tr class="">
        <td class="rozwin">
            <div class="collapse" id="collapseExample-2"> // original setting div
            </div>
        </td>
        <td class="mrkPoradaLp">2</td>
    </tr>

    <tr class="">
        <td class="rozwin">
            <div class="collapse" id="collapseExample-1">  // original setting div
            </div>
        </td>
        <td class="mrkPoradaLp">3</td>
    </tr>
</tbody>

为此:

<tbody>
    <tr class="">
        <td class="rozwin"></td>
        <td class="mrkPoradaLp">2</td>
    </tr>
    <div class="collapse" id="collapseExample-2"> // move to this location
    </div>

    <tr class="">
        <td class="rozwin"></td>
        <td class="mrkPoradaLp">3</td>
    </tr>
    <div class="collapse" id="collapseExample-1">  // move to this location
    </div>
</tbody>

Answer 1

这样就可以了:

$('.collapse').each(function(){
    $(this).insertAfter($(this).parents('tr'));
});

Example with jsFiddle

编辑

这里是注释中的代码，用于保留有效的 HTML:

$('.collapse').each(function(index){ 
    $('<tr><td id="collapse_' + index + '" colspan="2">').insertAfter($(this).parents('tr'));
    $(this).appendTo('#collapse_' + index);
});

Example with jsFiddle