通过代码移除jQuery UI tab时，能否对剩余tab的id重新编号？

问题根因 #

你当前生成tab ID的逻辑是用现有tab的数量+1作为新ID，删除非末尾的tab后，现存的最大ID会大于当前tab数量，新增时就会出现ID重复冲突。

推荐解决方案 #

方案1：使用全局自增ID（更简单，无需重新编号） #

不需要修改删除逻辑，直接新增全局自增计数器生成唯一ID，永远不会出现重复：

// 全局tab ID计数器，初始值为1
let tabIdCounter = 1;

function addtab(input) {
     // 直接使用计数器值作为ID，每次新增后自增
     const currentTabId = tabIdCounter++;
     $("div#tabs ul").append(
     `<li class='test' title='${input}'><a href='#tab${currentTabId}'>${input}</a><span class='ui-icon ui-icon-close' role='presentation'></span></li>`
     );
     // 修复原代码img标签语法错误：移除src后多余分号，将宽高放入style属性
     $("div#tabs").append(
          `<img id='tab${currentTabId}' src='<%=request.getContextPath()%>/Viewer_2D' style='height:100%;width:100%'/>`
     );
     // 直接激活最后一个tab，无需手动计算索引
     $("div#tabs").tabs("option", "active", -1);
     $("div#tabs").tabs("refresh");
}

这个方案性能最高，逻辑最简单，完全规避ID冲突问题。

方案2：删除后重新编号tab ID（满足连续ID需求） #

如果业务要求tab ID必须连续，可以在每次删除tab后遍历剩余元素统一重新编号：

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' style='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 $targetLi = $( this ).closest( "li" );
          var panelId = $targetLi.attr( "aria-controls" );
          $targetLi.remove();
          $( "#" + panelId ).remove();
          
          // 重新编号逻辑
          let newIndex = 1;
          $("#tabs ul li").each(function() {
              const oldPanelId = $(this).attr("aria-controls");
              const newPanelId = `tab${newIndex}`;
              // 更新li相关属性
              $(this).attr("aria-controls", newPanelId)
                     .find("a").attr("href", `#${newPanelId}`);
              // 更新对应面板ID
              $(`#${oldPanelId}`).attr("id", newPanelId);
              newIndex++;
          });
          
          $("#tabs").tabs( "refresh" );
     });
});

另外注意原代码删除逻辑里的tabs变量未定义，如果你没有提前定义这个变量，需要改成$("#tabs")调用refresh方法。

内容的提问来源于stack exchange，提问作者ajkrueger