Parse XML avec jQuery

Question

J'ai un XML qui doit être analysé en utilisant jQuery. Je comprends comment obtenir le premier niveau de nœuds de la carte du site, mais certains de mes nœuds ont trois ou quatre niveaux de profondeur. Je n'arrive pas à dépasser le niveau 2. Voici mon XML et mon code. Je suis fatiguant de le sortir sur une liste pour être en mesure de faire un jQuery déroulant sur hover pour l'un des sites sur lesquels je travaille. S'il vous plaît, quelqu'un qui peut aider.

<siteMapNode url="#" title="root" description=""> 
    <siteMapNode url="http://qswebdev02:2010/Category/4-gear.aspx" title="Gear" description="Gear"> 
     <siteMapNode url="http://qswebdev02:2010/Category/5-snow.aspx" title="Snow" description="Snow"> 
      <siteMapNode url="http://qswebdev02:2010/Category/6-bags.aspx" title="Bags" description="Bags" /> 
     </siteMapNode> 
     <siteMapNode url="http://qswebdev02:2010/Category/7-surf.aspx" title="Surf" description="Surf"> 
      <siteMapNode url="http://qswebdev02:2010/Category/8-towels.aspx" title="Towels" description="Towels" /> 
     </siteMapNode> 
    </siteMapNode> 
</siteMapNode> 

-

$(document).ready(function() { 
    $.ajax({ 
     url: 'nav.xml', 
     type: 'GET', 
     dataType: 'xml', 
     error: function (XMLHttpRequest, textStatus, errorThrown) { 
      alert('Error: ' + textStatus + ", " + errorThrown); 

     }, 
     success: function (xml) { 
      var count = 0; 

      $(xml).find('siteMapNode').each(function (e) { 
       //category 
       var url = $(this).attr('url'); 
       var title = $(this).attr('title'); 
       var descr = $(this).attr('description'); 
       var image = $(this).attr('image'); 
       var listItems = '<li id="parent"><a href="' + url + '">' + title + '</a></li>'; 

       if ($(this).children()) { 
        $(this).children().each(function (n) { 
         var suburl = $(this).attr('url'); 
         var subtitle = $(this).attr('title'); 
         var subdescr = $(this).attr('description'); 
         var target = $(this).attr('target'); 
         listItems += '<li id="' + subtitle + '" style="margin-left: 15px;"><a href="' + suburl + '" target="' + target + '" >' + subtitle + '</a></li>'; 
        }); 

       } 
       $(listItems).appendTo('#list'); 
       count++; 
      }); 

     } 
    }); 
}); 

Answer 1

On y va. Cette solution utilise la récursivité, donc maintenant vous n'êtes plus lié à la profondeur de votre arbre xml! Amusez-vous :)

(function(){ 

    var returnA = function(a){ 
    var _this = a, 
    url = _this.attr('url'), 
    title = _this.attr('title'), 
    description = _this.attr('description'); 

    return '<a href="'+url+'" title="'+description+'">' + title +'</a>'; 
    } 

    var map = function(root) { 
    var html = "<ul>"; 

    var _this = jQuery(root); 

    if(root.length) { 
    for (var i=0; i < root.length; i++) { 

     var li = "<li>", 

     child = jQuery(root[i]), 
     subchildren = child.children(), 
     returnedA = returnA(child); 

     li += returnedA; 

     if(subchildren.length) { li += arguments.callee(subchildren); } 

     html += li+"</li>"; 

    }; 
    } 

    return html+"</ul>"; 

    }; 

    var tree = map(jQuery('<siteMapNode url="#" title="root" description="">\ 
    <siteMapNode url="http://qswebdev02:2010/Category/4-gear.aspx" title="Gear" description="Gear">\ 
     <siteMapNode url="http://qswebdev02:2010/Category/5-snow.aspx" title="Snow" description="Snow">\ 
     <siteMapNode url="http://qswebdev02:2010/Category/6-bags.aspx" title="Bags" description="Bags" />\ 
     </siteMapNode>\ 
     <siteMapNode url="http://qswebdev02:2010/Category/7-surf.aspx" title="Surf" description="Surf">\ 
     <siteMapNode url="http://qswebdev02:2010/Category/8-towels.aspx" title="Towels" description="Towels" />\ 
     </siteMapNode>\ 
    </siteMapNode>\ 
    </siteMapNode>').children()); 
})(); 

PS: Votre source XML me semble corrompue, vous devez fermer la balise de l'élément racine.

Answer 2

Je pense que je pensais que ce à l'aide de la récursion, mais ce qui rend encore plus facile pour moi-même

 $(document).ready(function() { 
     var listitems = ""; 
     var rootNodes = $(xml).children(); 
     $(rootNodes).each(function(i) { 
      listitems += parseNode($(this)[i]); 
     }); 
     $('#thediv').html(listitems); 
    }); 

    function parseNode(node) { 
     var listitems = ""; 
     if ($(node).children().length > 0) { 
      listitems += "<ul>"; 
      $(node).children().each(function(i) { 
       var title = $(this).attr("title"); 
       var url = $(this).attr("url"); 
       listitems += "<li>" + title + "</li>"; 
       if ($(this).children().length > 0) { 
        listitems += parseNode($(this)); 
       } 
      }); 
      listitems += "</ul>"; 
     } 
     return listitems; 
    }