Выбираете jquery-ui-tab на основе его идентификатора вместо индекса?

Кто-нибудь знает, почему не работает следующее?

$.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"S.

Приведенное выше ничего не делает при нажатии кнопки и не возвращает никаких ошибок.

Работает нормально при использовании 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 );
    });

});

3 ответа

Решение

Вы можете использовать метод index(), чтобы получить индекс вкладки по идентификатору ее заголовка:

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

поскольку index() вызывается без аргументов в приведенном выше коде, он возвращает индекс элемента относительно его братьев и сестер, то есть других заголовков табуляции.

Вы можете переключать вкладки с идентификатором вкладки:

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

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

Мне кажется, что.index() возвращает индекс от 1, поэтому, если у меня есть 3 вкладки и я хочу выбрать третью, я должен вернуть:

$("#button" + item.id).live("click", function() {
    $("#tabs").tabs("select", $("#tab_" + item.id).index()-1);
});
Другие вопросы по тегам