Looping through dyamically generated jQuery tabs and adding classes

OK, so I have a tabbed interface which adds tabs dynamically once a link is clicked and fills the newly generated tabs using ajax. That portion works fine, however I need to extend the functionality to allow the dynamically-created tabs to also have a class assigned to them during the same click. My current code is as follows:

$(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');
    });
});

This code works absolutely fine to add the tabs. However, I'm not sure how to go about adding the class. I've tried placing the following directly after the second tabs.tabs line, to no avail:

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

The main problem is that the generated tabs are given an id of #ui-tabs-* where * is an automatically incremented value in the form of an even number. I should probably point out that the reason for assigning a class is so they can be destroyed at a later date. I did also consider using the each function, but I wasn't sure if that was the best method possible?

Apologies if this seems a bit of a daft question, jQuery isn't exactly my strong point.

EDIT

Ok, so following on from Bumble's suggestion below, I've added a little more functionality, namely the removal of any previously created tabs with the same onclick event:

$(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\');
        });
    });
});

Now this code works, to a degree. The UI has one tab which is persistent (the main tab containing the onclick link), then two tabs generated by said link. How开发者_如何学运维ever, the code above removes the persistent tab and leaves the two generated ones intact! Any ideas?

FURTHER EDIT

Ok, so after looking at the documentation, you have to provide the remove function with a tab index to remove, you can't remove tabs based on a class name. So somehow the remove function has to first grab the index of the tab (if it has the testClass class), then remove it. Am I reading this right?

---

You can use a wildcard to select all generated tabs and then loop through, checking if they have the class or not:

$(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');
        });
    });
});

---

I completely forgot to close this. I eventually got it working with the following:

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');
});

the tabsremove function removes the tab with the index 1, and once the first tab is removed the second tab then assumes an index of 1, thereby removing both.