Jquery UI选项卡：无法获取正确的Tab顺序

Question

我一直在尝试使用以下代码的addTab函数中的以下代码获取JqueryUI选项卡的顺序：jqueryUI tab demo

function addTab() {
  var label = tabTitle.val() || "Tab " + tabCounter,
    id = "tabs-" + tabCounter,
    li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
    tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";

  tabs.find( ".ui-tabs-nav" ).append( li );
  tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
  tabs.tabs( "refresh" );
   //code for finding the tab order
   var tab_order = [];
   $("#tabs > ul > li > a").each(function(i){          
        tab_order[i]= this.id.substr(6);
   });
   alert(tab_order);


  tabCounter++;
}

第一次添加新标签时，警告标签的顺序是1,3而不是1,2，应该是这种情况。这是小提琴：JS FIDDLE