ajax - 动态加载选项卡时重置 ui-tabs id 号

Question

我的代码

function get_projects() {
 $.ajax ({
   url: "get_projects.php",
   type: "post",
   dataType: "json",
   data: {value : $("#search_term").val()},
   success: function(store) {   
     var a = 0;
     var b = 0;

     $("#testdiv").empty();             
     var content = '';                                      
     $.each(store, function(i, data) {
       a = a + 1;
       content += '<div id="tabs'+[i]+'">';
       content += '<ul>';       
       content += //.... a bunch of tab headings    
       content += '</ul>';
       content += '<div id="ui-tabs-'+(a+b)+'">';
       // ... some tab content 

       content += '</div>';
       content += '<div id="ui-tabs-'+(a+1+b)+'">';
       // ... some tab content for each tab up to 

       content += '<div id="ui-tabs-'+(a+5+b)+'">';
       // ... some tab content 
       content += '</div>'; 
       content += '</div>';
       b = b + 5;       
       });

     $("#testdiv").append(content);

     $("#tabs0").tabs(); 
     $("#tabs1").tabs(); 
     $("#tabs2").tabs(); 
     .... same thing for a bunch of other possible tabs up to #tabs20 

简短的解释

asearch_term可以导致多个projects，每个项目有 6 个选项卡。所以每次提交搜索词时，页面都会重新绘制新项目及其信息选项卡

问题

第一次将 html 注入页面时，一切都很好。

生成的 div idui-tabs-#与我用(a+...+b)计数器创建的 div id 匹配。

但是，在每个后续请求中，自动生成的 div id 编号正在累积，而不是从零开始。所以我的(a+...+b)柜台正在生产不匹配的 div id。因此标签内容位于标签容器之外

我已经尝试过.tabs("destroy")，.tabs("remove")对于循环内外的$("#testdiv")个人和个人$("#tabs0")$.each()

我似乎无法解决

任何帮助和建议都会很棒

Answer 1

通过移动变量a并b在 ajax 函数之外解决它，因此它们不会在每个循环中重置为 0

 var a = 0;
 var b = 0;

function get_projects() {
 $.ajax ({
    url: "get_projects.php",
    type: "post",
    dataType: "json",
    data: {value : $("#search_term").val()},
    success: function(store) {   

 $("#testdiv").empty();             
 var content = '';                                      
 $.each(store, function(i, data) {
   a = a + 1;
   content += '<div id="tabs'+[i]+'">';
   content += '<ul>';       
   content += //.... a bunch of tab headings    
   content += '</ul>';
   content += '<div id="ui-tabs-'+(a+b)+'">';
   // ... some tab content 

   content += '</div>';
   content += '<div id="ui-tabs-'+(a+1+b)+'">';
   // ... some tab content for each tab up to 

   content += '<div id="ui-tabs-'+(a+5+b)+'">';
   // ... some tab content 
   content += '</div>'; 
   content += '</div>';
   b = b + 5;       
   });

 $("#testdiv").append(content);

 $("#tabs0").tabs(); 
 $("#tabs1").tabs(); 
 $("#tabs2").tabs(); 
 .... same thing for a bunch of other possible tabs up to #tabs20