使用jQuery解析XML

Question

我有一個需要使用jQuery解析的XML。我瞭解如何獲得第一層網站地圖節點，但我的一些節點深度達到3或4層。我似乎無法超過2級。這是我的XML和我的代碼。我很累，將它輸出到列表中，以便能夠在我正在工作的其中一個站點上懸停時執行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> 

-

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

在這裏，我們走了。這個解決方案使用遞歸，所以現在你不再束縛你的xml樹的深度了！玩得開心:)

(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：你的XML-Source對我來說看起來腐敗，你需要關閉根元素的標記。

Answer 2

我想我想通了使用遞歸但是使它即使是我自己更容易

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