时间戳

首页 > 解决方案 > 以编程方式删除 jquery ui 选项卡时，我可以重新编号剩余的 id 吗？

javascript - 以编程方式删除 jquery ui 选项卡时，我可以重新编号剩余的 id 吗？

问题描述

我正在以编程方式添加和删除 jquery 选项卡，其中：

function addtab(input) {
     var num_tabs = $("div#tabs ul li").length + 1;
     $("div#tabs ul").append(
     "<li class='test' title = '" + input + "'><a href='#tab" + num_tabs + "'>" + input + "</a><span class='ui-icon ui-icon-close' role='presentation'></span></li>"
     );
     $("div#tabs").append(
          "<img id='tab" + num_tabs + "' src='<%=request.getContextPath()%>/Viewer_2D'; height='100%' width='100%'/>"
     );
     $("div#tabs").tabs("option", "active", num_tabs-1);
     $("div#tabs").tabs("refresh");
}

$(function() {
     $("#tabs").on( "click", "span.ui-icon-close", function() {
          var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
          $( "#" + panelId ).remove();
          tabs.tabs( "refresh" );
     });
});

如果我添加三个选项卡，然后删除最后一个选项卡，则尝试添加其他选项卡时没有问题 - 新选项卡的 id 将为“num_tabs”。但是，如果我要添加三个选项卡，然后删除第一个选项卡，则 id=num_tabs 的选项卡已经存在。我该如何处理？删除标签后，我可以重新编号标签 ID 吗？

标签： javascriptjquery

解决方案

您在问题中没有提到这一点，但我认为 ID 不需要是连续的。重要的是每个 ID 都是唯一的。

而不是使用num_tabs来确定选项卡的编号，您可以简单地始终增加数字（删除选项卡时不要减少它）。

这可以通过多种方式完成，例如...

  • 使用一个变量来跟踪您添加了多少标签。
  • 使用 jQuery 的data-语法（请参阅.data()将选项卡的编号存储为选项卡上的值。通过这样做，您可以检索最后一个选项卡上的数字并增加它以确定下一个选项卡的编号。
  • 使用正则表达式解析最后一个选项卡的 id 以检索数值并在添加新选项卡时增加该数字。

推荐阅读