ダイナミックに生成された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行の直後に、次の主な問題が発生したタブは＃のUI-tabs- * *でのIDが与えられていることを

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

偶数の形で自動的に増分された値。おそらくクラスを割り当てる理由は後で破棄することができるということを指摘すべきです。私も各機能の使用を検討しましたが、可能な限り最良の方法であるかどうかはわかりませんでしたか？

これはちょっと疑わしい質問のように見えますが、jQueryは私の強みではありません。

EDIT

オクラホマので、下記のバンブルの提案に続く、私は少しより多くの機能、同じの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\'); 
     }); 
    }); 
}); 

を

これで、このコードはある程度機能します。 UIは、永続的な1つのタブ（onclickリンクを含むメインタブ）と、前記リンクによって生成される2つのタブとを有する。ただし、上のコードは永続タブを削除し、生成された2つのタブをそのまま残します。何か案は？

FURTHER EDIT

[OK]を、ドキュメントを見た後、削除するタブインデックスを削除機能を提供する必要がありますので、あなたは、クラス名に基づいてタブを削除することはできません。したがって、何らかの理由で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とタブを削除し、最初のタブが除去されると2番目のタブは、それによって両方の除去、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'); 
     }); 
    }); 
});