jquery - 删除动态 JQuery UI 选项卡

Question

我正在创建一个 Web 应用程序，我想使用选项卡小部件来复制您在大多数 Web 浏览器中找到的选项卡功能。我希望用户能够:移动(排序)选项卡、动态创建选项卡、动态关闭选项卡。

我在删除已移动的选项卡时遇到问题。

假设有三个选项卡，名称为:

one, two and three.

如果我移动“一”，那么选项卡就像:

two, three and one

当我删除索引为 2 的“一”时，选项卡“三”也会被删除。所以选项卡现在是:

two, and one.

我测试了许多不同的场景，在我看来，当我删除选项卡时，JQueryUI 删除了最初具有索引值的错误选项卡，而不是当前具有索引值的选项卡。

Answer 1

您说得对，当您重新排序选项卡时，选项卡会保留其旧索引值，从而导致当您尝试删除选项卡时出现意外行为。您可以通过在删除之前重新初始化选项卡来强制它更新索引，如下所示:

$('#tabs').tabs('destroy').tabs();
$('#tabs').tabs('remove', 2);

这是可行的，因为索引是在根据 DOM 中的 li 元素的位置设置选项卡时生成的。当您移动选项卡时，li 位置会在 DOM 中更新，即使它们的索引值在选项卡插件中没有更改。

当然，如果您有一个非常复杂的设置，这可能会对性能产生负面影响，在这种情况下，您可以找到其他方法来更新选项卡索引，或者您可以维护一个将原始索引映射到当前索引。