使用jQuery绑定，选择和循环遍历XML数据

I have an XML document thus:

我有一个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>

And jQuery which calls said XML document and dynamically updates values onClick of a table column.

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

What i would like to do is retrieve the data in the XML doc for the current tab:

我想要做的是检索当前标签的XML文档中的数据：

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

    var tabPosition = tabPosition + 1

So when a user clicks on a tab the XML level values of the tab will be called. I thought i could do this by finding the position of the tab and then use that to retrieve the data for that tab in the XML doc.

因此，当用户单击选项卡时，将调用选项卡的XML级别值。我想我可以通过查找选项卡的位置然后使用它来检索XML文档中该选项卡的数据来完成此操作。

The HTML for the tabs:

标签的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>

And some more jQuery to set the styling of the current tab:

还有一些jQuery来设置当前选项卡的样式：

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

1 个解决方案

#1

I have achieved this to some extent with the following:

我在一定程度上实现了以下目标：

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

    };  

});

If anyone knows how to reflect the price update when a tab changes but the column doesn't that would be great.

如果有人知道如何在选项卡更改时反映价格更新，但列不会更好。

#1