Связывание, выбор и циклический просмотр данных XML с помощью jQuery

Question

У меня есть XML-документ, таким образом:

<tab id="1">
    <name>Individual</name>
    <coverLevel>
        <level id="1">
            <month>20</month>
            <week>5</week>
        </level>    
        <level id="2">
            <month>40</month>
            <week>10</week>
        </level>
        <level id="3">
            <month>80</month>
            <week>20</week>
        </level>        
    </coverLevel>
</tab>

<tab id="2">
    <name>Couple</name>
    <coverLevel>
        <level id="1">
            <month>40</month>
            <week>10</week>
        </level>    
        <level id="2">
            <month>80</month>
            <week>20</week>
        </level>
        <level id="3">
            <month>160</month>
            <week>40</week>
        </level>        
    </coverLevel>       
</tab>

<tab id="3">
    <name>Family</name>
    <coverLevel>
        <level id="1">
            <month>80</month>
            <week>20</week>
        </level>    
        <level id="2">
            <month>160</month>
            <week>40</week>
        </level>
        <level id="3">
            <month>320</month>
            <week>80</week>
        </level>        
    </coverLevel>       
</tab>

<tab id="4">
    <name>Single parent family</name>
    <coverLevel>
        <level id="1">
            <month>40</month>
            <week>10</week>
        </level>    
        <level id="2">
            <month>80</month>
            <week>20</week>
        </level>
        <level id="3">
            <month>160</month>
            <week>40</week>
        </level>        
    </coverLevel>       
</tab>

И jQuery, который вызывает указанный XML-документ и динамически обновляет значения при щелчке столбца таблицы.

$(document).ready(function(){

$('table#benefit > thead > tr > th, table#benefit > thead > tr > th > a, table#benefit > tbody > tr > td').click(function(){

    var colIndex = $(this).parent().children().index ($(this));

    var tabPosition = $('ul#coverTabs > li').index ($('.currentTab'));

    var tabPosition = tabPosition + 1

    if (colIndex != 0) {

    $.get('/cash-plan-quote/table.xml', function(data){

        $(data).find('level').each(function() {

            var $level = $(this);
            var $levelID = $level.attr('id');

            if (colIndex == $levelID) {
                var coverLevel = '<span>Level ' + $levelID + ' benefits</span>';
                var monthCost = '<h5>&pound;' + $level.find('month').text() + '</h5>';
                var weekCost = '<h6>&pound;' + $level.find('week').text() + '</h6>';

                $('div.costPanel > h2 > span').replaceWith($(coverLevel));
                $('div.costPanel > div.costs > h5').replaceWith($(monthCost));
                $('div.costPanel > div.costs > h6').replaceWith($(weekCost));
                };
        }); 
    });
     return false;
    };  
});
});

Что я хотел бы сделать, это получить данные в документе XML для текущей вкладки:

    var tabPosition = $('ul#coverTabs > li').index ($('.currentTab'));

    var tabPosition = tabPosition + 1

Таким образом, когда пользователь нажимает на вкладку, будут вызываться значения уровня XML вкладки. Я подумал, что смогу сделать это, найдя положение вкладки, а затем использовать ее для извлечения данных для этой вкладки в XML-документе.

HTML-код для вкладок:

<ul id="coverTabs">
    <li class="currentTab"><a href="#">Individual</a></li>
    <li><a href="#">Couple</a></li>
    <li><a href="#">Family</a></li>
    <li><a href="#">Single parent family</a></li>
</ul>

И еще несколько jQuery для настройки стиля текущей вкладки:

$(".currentTab").removeClass("currentTab");
$(this).addClass("currentTab");

Answer 1

Я достиг этого в некоторой степени с помощью следующего:

$('ul#coverTabs > li').live('click', function() {

    //$defaultCell.trigger('click');

    // Removes default class applied in HTML and onClick adds 'currentTab' class
    $(".currentTab").removeClass("currentTab");
    $(this).addClass("currentTab"); 

    // Find number of li
    var tabIndex = $(this).parent().children().index ($(this));
    var tabIndex = $tabIndex + 1;

    // Get table data
    $.get('/cash-plan-quote/table.xml', function(data){

        $(data).find('tab').each(function() {

            var tab = $(this);
            var tabID = tab.attr('id');

            if (tabIndex == tabID) {

                var labelTxt = '<h3 class="benefitHead">' + $tab.find('name').text() + '</h3>';                 

                $('h3.benefitHead').replaceWith($(labelTxt));

            };

        }); 

     });

     return false;      

});

// Retrieve XML price info on column click
$('table#benefit > thead > tr > th, table#benefit > thead > tr > th > a, table#benefit > tbody > tr > td').live('click', function() {   

    // Find columns     
    var colIndex = $(this).parent().children().index ($(this));
    //alert(colIndex);

    // Don't retrieve data on the first column
    if (colIndex != 0) {

        // Find the active tab
        var currentTab = $('ul#coverTabs > li').index ($('.currentTab'));
        var currentTab = currentTab + 1     

        //  Get table.xml
        $.get('/cash-plan-quote/table.xml', function(data){

            $(data).find('tab').each(function(){

                var tab = $(this);
                var tabID = tab.attr('id');

                if (currentTab == tabID){

                    //alert(currentTab);
                    //alert(tabID);

                    tab.find('level').each(function(){

                        var level = $(this);
                        var levelID = level.attr('level_id');

                        var month = level.find('month').text();
                        var week = level.find('week').text();

                        if (colIndex == levelID){

                            var coverLevel = '<span>Level ' + levelID + ' benefits</span>';                 
                            var monthCost = '<h5>&pound;' + month + '</h5>';
                            var weekCost = '<h6>&pound;' + week + '</h6>';

                            $('div.costPanel > h2 > span').replaceWith($(coverLevel));
                            $('div.costPanel > div.costs > h5').replaceWith($(monthCost));
                            $('div.costPanel > div.costs > h6').replaceWith($(weekCost));                           

                        };

                    });

                };                  

            });

        });

        return false;

    };  

});

Если кто-то знает, как отразить обновление цены при смене вкладки, но столбец этого не делает, было бы замечательно.