jQueryブートストラップ動的タブ（追加と削除）

Question

私はユーザーがBootstrap UIタブでタブを追加したり削除したりできるようにするコードを持っています。私は成功裏にそれを作った、そしてはい、それはうまくいきます。

唯一の問題は、タブ名をソートしないことです。例えば、このようなタブがあります：私はTab 2を削除するとTab 1、Tab 2、Tab 3、Tab 4、Tab 5

だから、Tab 3はTab 2なり、ときに私その後、Tab 4はまたようにTab 3と...

になりますタブを削除すると、アクティブなタブにタブ1が表示されます（jsfiddleで確認してください）

私の2つの問題はありますか？

JSFiddleリンク：https://jsfiddle.net/cnycmLq0/

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <p> 
       <button id="btn-add-tab" type="button" class="btn btn-primary pull-right">Add Tab</button> 
      </p> 
      <!-- Nav tabs --> 
      <ul id="tab-list" class="nav nav-tabs" role="tablist"> 
       <li class="active"><a href="#tab1" role="tab" data-toggle="tab">Tab 1</a></li> 
      </ul> 

      <!-- Tab panes --> 
      <div id="tab-content" class="tab-content"> 
       <div class="tab-pane fade in active" id="tab1">Tab 1 content</div> 
      </div> 
     </div> 
    </div> 
</div> 

JS：

$(document).ready(function() { 
     var tabID = 1; 
     $('#btn-add-tab').click(function() { 
      tabID++; 
      $('#tab-list').append($('<li><a href="#tab' + tabID + '" role="tab" data-toggle="tab">Tab ' + tabID + '<button class="close" type="button" title="Remove this page">×</button></a></li>')); 
      $('#tab-content').append($('<div class="tab-pane fade" id="tab' + tabID + '">Tab ' + tabID + ' content</div>')); 
     }); 
     $('#tab-list').on('click', '.close', function() { 
      var tabID = $(this).parents('a').attr('href'); 
      $(this).parents('li').remove(); 
      $(tabID).remove(); 

      //display first tab 
      var tabFirst = $('#tab-list a:first'); 
      tabFirst.tab('show'); 
     }); 

     var list = document.getElementById("tab-list"); 
    }); 

Answer 1

私はちょうどあなたのtabsをリセットし、そのtextを変更するfunctionを書かれています。主な部分はvarにbutton htmlを格納し、グローバル変数としてbutton htmlとtabIDの両方を作成することです。 イベントでfunctionと呼ぶことができます。

var button='<button class="close" type="button" title="Remove this page">×</button>'; 
var tabID = 1; 
function resetTab(){ 
    var tabs=$("#tab-list li:not(:first)");//get all tabs except first tab 
    var len=1;//we do not want to reset 1st tab 
    $(tabs).each(function(k,v){ 
     len++;//increment it 
     $(this).find('a').html('Tab ' + len + button); //replace each tabs html with latest index and button html. 
    }) 
    tabID--;//decrement tabs count 
} 

Complete solution in Fiddle