循环通过dyamically生成的jQuery选项卡并添加类

Question

好的，所以我有一个选项卡式界面，动态添加选项卡，一旦链接被点击并使用ajax填充新生成的选项卡。该部分工作正常，但我需要扩展功能，以允许动态创建的选项卡还可以在同一次单击时为其分配类。我目前的代码如下：

$(document).ready(function() { 
    var tabs = $("#tabs").tabs(); 
    $(".tabButton").live("click", function(){ 
     var getTopicID = $('.topicID',$(this).parent()).val(); 
     tabs.tabs('add', 'ajax.php?section=summary&id=' + getTopicID, 'Summary'); 
     tabs.tabs('add', 'ajax.php?section=read&id=' + getTopicID, 'Read Topic'); 
    }); 
}); 

此代码工作绝对没问题添加选项卡。但是，我不确定如何去添加课程。我试过直接放置在第二tabs.tabs行后以下，但无济于事：

$(this).addClass('testClass'); 

的主要问题是生成的标签被赋予＃UI-tabs- *，其中*是一个的ID以偶数形式自动递增值。我应该指出，分配一个班级的原因是，他们可以在以后被销毁。我也考虑过使用每个函数，但我不确定这是否是最好的方法。

道歉，如果这看起来有点愚蠢的问题，jQuery不完全是我的强项。

编辑

好了，从下面大黄蜂的建议下，我已经加了一点更多的功能，即具有相同onclick事件清除以前创建的任何标签：

$(document).ready(function() { 
    var tabs = $("#tabs").tabs(); 
    $(".tabButton").live("click", function(){ 
     $(\'div[id*="ui-tabs-"]\').each(function(index) { 
      if($(this).hasClass(\'testClass\')) 
      $("#tabs").tabs("remove", \'.testClass\'); 
     }); 
     var getTopicID = $(\'.topicID\',$(this).parent()).val(); 
     tabs.tabs(\'add\', \'ajax.php?section=summary&id=\' + getTopicID, \'Summary\'); 
     tabs.tabs(\'add\', \'ajax.php?section=read&id=\' + getTopicID, \'Read Topic\'); 
     $(\'div[id*="ui-tabs-"]\').each(function(index) { 
      if(!$(this).hasClass(\'testClass\')) 
      $(this).addClass(\'testClass\'); 
     }); 
    }); 
}); 

现在这个代码在一定程度上起作用。用户界面有一个持久性的标签（主标签包含onclick链接），然后是由该链接生成的两个标签。但是，上面的代码删除了永久性选项卡，并使两个生成的选项保持不变！有任何想法吗？

进一步编辑

好了，看文件后，你必须提供删除功能与标签索引中删除基于一类的名字，你不能删除标签。所以不知何故，remove函数必须首先获取选项卡的索引（如果它具有testClass类），然后将其删除。我正在读这个吗？

Answer 1

我完全忘了关闭这个。我最终得到它具有下列工作：

var tabs = $("#tabs").tabs({ spinner: 'Retrieving data...' }); 
$(".tabButton").live("click", function(){ 
    var getTopicID = $('.topicID',$(this).parent()).val(); 
      $("#tabs").tabs("remove",1); 
      $("#tabs").tabs("remove",1); 
    tabs.tabs('add', 'ajax.php?section=summary&id=' + getTopicID, 'Summary'); 
    tabs.tabs('add', 'ajax.php?section=read&id=' + getTopicID, 'Read Topic'); 
}); 

的tabsremove函数删除与索引1的标签，并且一旦所述第一接线片被除去第二个标签则呈现1的索引，由此去除两者。

Answer 2

您可以使用通配符通过选择所有生成的标签，然后循环，检查他们是否有类或不：

$(document).ready(function() { 
    var tabs = $("#tabs").tabs(); 
    $(".tabButton").live("click", function(){ 
     var getTopicID = $('.topicID',$(this).parent()).val(); 
     tabs.tabs('add', 'ajax.php?section=summary&id=' + getTopicID, 'Summary'); 
     tabs.tabs('add', 'ajax.php?section=read&id=' + getTopicID, 'Read Topic'); 
     $('div[id*="ui-tabs-"]').each(function(index) { 
      if($(this).hasClass('testClass')) 
       $(this).remove(); 
      else 
       $(this).addClass('testClass'); 
     }); 
    }); 
});