javascript - jQuery将表行移动到下一个并分配了类

Question

我有一个任务表，如下所示：

<table>
<tr class="open">
<td>Some task 1</td>
</tr>
<tr class="open">
<td>Some task 2</td>
</tr>
<tr class="open">
<td>Some task 3</td>
</tr>
<tr class="closed">
<td>Some task 4</td>
</tr>
<tr class="closed>
<td>Some task 5</td>
</tr>
</table>

任务按打开然后关闭列出。当我将任务标记为已关闭时，我想将该行移至第一个已关闭任务的上方。例如，如果我将“某些任务 1”设置为已关闭，我想将该行移动到“某些任务 4”上方，其他打开的任务下方。

最好的方法是什么？

我试过使用 .closest() 但这似乎不适用于类选择器。

Answer 1

如果$tr要移动您的行：

$('tr.open').last().after($tr);

或作为包括类更新的一行：

$tr.insertAfter('tr.open:last').removeClass('open').addClass('closed');

Answer 2

如果可能没有关闭：

function onClosed($newlyClosedElement){
    if ($('.closed').length){
         $newlyClosedElement.insertBefore($('.closed').first());
    }
    else{
         $newlyClosedElement.insertAfter($('.open').last());
    }

    $newlyClosedElement.removeClass('open').addClass('closed');
}