Javascript 使用jQuery如何将页面中的相同ID更改为引导选项卡的序列化ID

以下是我的HTML在页面中的呈现方式：

<!-- Group-01: Tab One and Two -->
<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href="#tab-01" data-toggle="tab">Home</a></li>
  <li><a href="#tab-02" data-toggle="tab">About</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="tab-01">Home tab content</div>
  <div class="tab-pane" id="tab-02">About tab content</div>
</div>

<!-- Group-02: Tab One and Two -->
<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href="#tab-01" data-toggle="tab">Home</a></li>
  <li><a href="#tab-02" data-toggle="tab">About</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="tab-01">Home tab content</div>
  <div class="tab-pane" id="tab-02">About tab content</div>
</div>

主页选项卡内容
关于选项卡内容




主页选项卡内容
关于选项卡内容

但这就是我希望jQuery改变我的HTML的方式：

<!-- Group-01: Tab One and Two -->
<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href="#group-01_tab-01" data-toggle="tab">Home</a></li>
  <li><a href="#group-01_tab-02" data-toggle="tab">About</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="group-01_tab-01">Home tab content</div>
  <div class="tab-pane" id="group-01_tab-02">About tab content</div>
</div>

<!-- Group-02: Tab One and Two -->
<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href="#group-02_tab-01" data-toggle="tab">Home</a></li>
  <li><a href="#group-02_tab-02" data-toggle="tab">About</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="group-02_tab-01">Home tab content</div>
  <div class="tab-pane" id="group-02_tab-02">About tab content</div>
</div>

主页选项卡内容
关于选项卡内容




主页选项卡内容
关于选项卡内容

试试：

尝试：

---

文档中的每个ID属性都应该是唯一的。。。我认为jQuery做得很好。Syed，正确的方法是在页面中使用唯一的ID。因此，第二种解决方案是正确的。更改ID的正常方法是直接更改

html

。你没有权限访问它吗？它是由您正在使用的某个工具生成的吗？@AndreiGheorghiu我是一名前端开发人员，在将其传递给后端开发人员之前，我将尽最大努力减少后端开发人员的工作，因此，如果不可能，请先在客户端找到解决方案，我会让后端开发人员知道如何通过PHP+JS添加它。让后端生成无效标记，并通过

JavaScript

在前端动态使其有效，这很难被视为一个好的开发过程，IMHO。任何页面中都不应该有重复的ID，这是常识，无论是后端还是前端。文档中的每个ID属性都应该是唯一的。。。我认为jQuery做得很好。Syed，正确的方法是在页面中使用唯一的ID。因此，第二种解决方案是正确的。更改ID的正常方法是直接更改

html

。你没有权限访问它吗？它是由您正在使用的某个工具生成的吗？@AndreiGheorghiu我是一名前端开发人员，在将其传递给后端开发人员之前，我将尽最大努力减少后端开发人员的工作，因此，如果不可能，请先在客户端找到解决方案，我会让后端开发人员知道如何通过PHP+JS添加它。让后端生成无效标记，并通过

JavaScript

在前端动态使其有效，这很难被视为一个好的开发过程，IMHO。任何页面中都不应该有重复的ID，这是常识，无论是后端还是前端。这里我将

$contents.each（function（tabIndex，content）

更改为

tabIndex

更改为

contentIndex

，即

$contents.each（function（contentIndex，content）

因为我得到了错误，但这产生了不同的结果。

#group-02_01

用于制表符，而`id=“group-03_01”用于制表符内容。因此，内容增加了1。这里我将

$contents.each（函数（tabIndex，content）

更改为

tabIndex

为

contentIndex

，即

$contents.each（函数（contentIndex，content）

因为我得到了错误，但这产生了不同的结果。

#group-02_01

用于选项卡，而`id=“group-03_01”用于选项卡内容。因此，内容增加了1。

var $tabLists = $('[role="tablist"]');
var $contents= $('.tab-content');

$tabLists.each(function(tabListIndex, tabList){
  var groupIndex = tabListIndex + 1;
  var $tabs= $(tabList).find('[data-toggle="tab"]');

  $tabs.each(function(tabIndex, tab){
    var newId = '#group-0' + groupIndex + '_' + $(tab).attr('href').slice(1);
    $(tab).attr('href', newId  );
  });
});

$contents.each(function(contentIndex, content){
  var groupIndex = contentIndex + 1;
  var $panes = $(content).find('.tab-pane');

  $panes.each(function(paneIndex, pane){
    var newId = 'group-0' + groupIndex + '_' + $(pane).attr('id');
    $(pane).attr('id', newId);
  });
});