Parse XML mit jQuery

Question

Ich habe ein XML, das mit jQuery analysiert werden muss. Ich verstehe, wie man die erste Ebene der Site Map Knoten bekommt, aber einige meiner Knoten sind 3 oder 4 Level tief. Ich kann nicht über Level 2 hinaus kommen. Hier ist mein XML und mein Code. Ich ermüde es, es in eine Liste auszugeben, um ein jQuery-Drop-down-Menü für eine der Websites, an denen ich gerade arbeite, zu erstellen. Bitte alle, die helfen können.

<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

Hier gehen wir. Diese Lösung verwendet Rekursion, so dass Sie nun nicht mehr an die Tiefe Ihres XML-Baumes gebunden sind! Viel Spaß :)

(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: Ihre XML-Quelle sieht für mich korrupt aus, Sie müssen das Tag des Wurzelelements schließen.

Answer 2

Ich glaube, ich es heraus die Rekursion verwenden, aber es noch einfacher für mich selbst

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

machen