javascript - JQUERY:将类保留在最后一个附加元素中，并从表中所有其他新添加的元素中删除

Question

我有一个表格，并且在每个 TR 中，如果我单击该图标，则会将新的 TR 附加到末尾。TR 还有一个 row_seperator 类。我希望将此 row_seperator 从之前所有新附加的行中删除，但保留在最后附加的行 TR 中。

$(this).closest('tr').removeClass("row_seperator") ;      
$('.new_row').removeClass('row_seperator').removeClass('new_row');
$('<tr class="row_seperator new_row"><td colspan="8">new td</td></tr>').insertAfter($(this).closest('tr'));

如下图所示。我希望这两条交叉线消失并保留最后一条线。这样每个部分都有一条线将其与其他部分分开。

Answer 1

我想this指的是点击的图标。在这种情况下，$(this).closest('tr') 将始终是带有“Section-A”(或 -B、-C，具体取决于单击的图标)的 TR。这意味着每个新 TR 都将插入到之前的 TR 之上，因此始终是第一个新 TR 必须具有 row_separator类。

如果我的假设都是正确的，我只需检查是否 $(this).closest('tr').hasClass('row_separator')，如果是，我会调用 removeClass 在它上面，addClass 在新元素上(或者像你一样在字符串中包含类)。如果没有，我两者都不会做。

另一方面，如果您想在之前的新 TR 后面插入新 TR，您可以向具有 图标的 TR 添加一些独特的类，并调用 $(this ).closest('tr').nextUntil('distinctive_class').last().after(newTr);

另请注意，如果您在Section-A、B和C之后添加了一些新的TR并调用$('.new_row').removeClass('new_row');，它将删除类来自每个 .new_row ，而不仅仅是来自单击图标 TR 之后的那些。