logo标签列表

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

javascriptjqueryhtmlcss
4
我该如何使用 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>
1
English dear......... - Satpal
1
你意识到这将产生无效的HTML结构并可能会引起问题吗？把 div 包装在 <tr><td colspan="2"> 中不是更好吗？ - Jamie Barker
2个回答
2
这个可以解决问题：
$('.collapse').each(function(){
    $(this).insertAfter($(this).parents('tr'));
});

这里是使用jsFiddle的示例

编辑

以下是来自评论区的代码，为了保持有效的HTML格式:

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

Example with jsFiddle

1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接