使用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看起来很糟糕,您需要关闭根元素的标记.