reliure, sélection et boucle à travers les données XML avec jQuery

Question

J'ai un document XML ainsi:

<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> 

Et jQuery qui appelle ledit document XML et met à jour dynamiquement les valeurs onClick d'un colonne de table.

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

Ce que je voudrais faire est de récupérer les données dans le document XML pour l'onglet en cours:

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

    var tabPosition = tabPosition + 1 

Ainsi, lorsqu'un utilisateur clique sur un onglet les valeurs de niveau XML de l'onglet sera appelé. Je pensais que je pourrais le faire en trouvant la position de l'onglet et ensuite l'utiliser pour récupérer les données de cet onglet dans le document XML.

Le code HTML pour les onglets:

<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> 

Et un peu plus jQuery pour définir le style de l'onglet en cours:

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

Answer 1

J'ai réalisé cela dans une certaine mesure avec les éléments suivants:

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

    }; 

}); 

Si quelqu'un sait comment refléter la mise à jour des prix quand un onglet change, mais la colonne ne le fait pas Sois génial.