根据 id 而不是索引选择 jquery-ui-tab？

Question

有人知道为什么以下不起作用吗？

$.each( data.d, function( index, item ) {

    // creates the tabs with custom ids
    $( "#tabs" ).tabs( "add", "page.aspx?id=" + item.id, item.name )
        .find('>ul>li:last')
        .attr('id', 'tab_' + item.id);

    // creates the buttons
    $( "#buttons" ).append( "<input type='button' id='buttona" + item.id + "' value='" + item.name + "'>" );

    // link buttons with tabs
    $( "#buttona" + item.id ).live('click', function() {
        $( "#tabs" ).tabs( "select" , "#tab_" + item.id );
    });

});

我试图将 id 分配给选项卡，然后使用其 id 选择选项卡。

单击按钮时，上面的代码不会执行任何操作，并且根本不会返回任何错误。

使用 index 时效果很好，如下所示，但由于各种原因我需要使用 id：

$.each( data.d, function( index, item ) {

    // creates the tabs
    $( "#tabs" ).tabs( "add", "page.aspx?id=" + item.id, item.name );

    // creates the buttons
    $( "#buttons" ).append( "<input type='button' id='button" + index + "' value='" + item.name + "-" + index + "'>" );

    // link buttons with tabs
    $( "#button" + index ).live('click', function() {
        $( "#tabs" ).tabs( "select" , index );
    });

});

Answer 1

您可以使用 index() 方法从选项卡标头的 id 获取选项卡的索引：

$("#button" + item.id).live("click", function() {
    $("#tabs").tabs("select", $("#tab_" + item.id).index());
});

由于在上面的代码中调用 index() 时不带参数，因此它将返回该元素相对于其同级元素（即其他选项卡标题）的索引。

Answer 2

您可以使用选项卡的 id 来切换选项卡：

var $tabs = $("#tabs").tabs();

$("button").click(function() {
    $tabs.tabs( "select", "#tabs-6" );
});

Answer 3

在我看来， .index() 返回从 1 开始的索引，因此如果我有 3 个选项卡并且想要选择第三个选项卡，我应该返回：

$("#button" + item.id).live("click", function() {
    $("#tabs").tabs("select", $("#tab_" + item.id).index()-1);
});