jquery - add id dynamically to jquery tabs

Question

I am creating jquery tabs dynamically. I want to associate the the id to each tab.

$(function() {
    var index = 0;
    $("#addTab").live('click', function() {
        index++;
        var title = 'Tab.....  ' + index;
        var url = '#fragment-' + index;

        addTab(url, title, index);
        $('li.ui-state-default').attr("id",index);
});

This code successfully assigns the id. But when I create a new tab. It assigns the id to whole class. I didn't want to do this. I just want to assign the unique id to each class

JS Fiddle

http://jsfiddle.net/gP3YZ/9/

Answer 1

$('li.ui-state-default:last').attr("id",index).attr('id');

デモ

Answer 2

$('li.ui-state-default').each( function(){
    $(this).attr("id",index++);
});

ところで、数値を DOM 要素の id として使用したり("item-"+index)、id属性として使用したりするのは悪い習慣です。