将XML解析为UL

我试图使用JQuery解析sitemap.xml看起来像这样的HTML： http ： //astuteo.com/slickmap/demo/

经过几个小时的努力，我觉得我真的需要一些正确方向的帮助。

它具有的主要模板是这样的，其中每个缩进是不同的目录级别：

 
Home
 
Services 
 
Graphic Design
 
Web Development
 
Internet Marketing 
 
Social Media
 
Search Optimization
 
Google AdWords
 
 
 
Copywriting
 
Photography
 
 
  

我使用的是google sitemap.xml，如下所示：

http://meyers.ipalaces.org/sitemap_000.xml

  http://meyers.ipalaces.org/ 2011-02-26T09:32:18Z hourly 0.4   http://meyers.ipalaces.org/meyers/photos/Explorer 2011-02-26T09:31:33Z hourly 0.2  

我提出的方法避免设置css模板上的所有内容，但我只是专注于让它具有正确的级别：

它的作用是使URL的级别通过每个级别尝试基于先前级别创建列表。 所以使用示例www.example.com/brand/model/product/ ：

它得到第一个[0]元素， www.example.com这是1级，所以它检查是否有ul[id=1] ，如果没有则运行create_ul并将其附加到#content 。 现在将一个li附加到它刚刚创建的ul级别1是“特殊的”，因为它必须首先创建，这就是为什么我在代码中有很多if level==1 。

对于下一个元素[1]，它获得了2级的brand 。这次检查是否有li[id=www.example.com] ul[id=2]如果存在，它将创建一个然后附加一个li到ul 。

这个方法根本不适合我，如果说8级具有相同的id和4级的东西，它也会混乱。我只需要一个关于如何处理这个问题的新想法。

这是我现在的function，但我确定我应该废弃大部分代码：

 function create_ul(level, id, prev_id) { var ul = $('
',{ id: level }); if(level==1) { $('#content').append(ul); } else { $('ul[id='+(level-1)+'] li[id='+prev_id+']').append(ul); } } function create_li(level, id, prev_id){ if (level ==1){ if ($('ul[id='+level+']').length == 0) { create_ul(level, id, prev_id); } else if ($('ul[id='+level+'] li[id='+id+']').length > 0) { return; } var li = $('
',{ id: id }); var a = $('',{ text: level + " - " + id, href: "nothing yet" }); $('ul[id='+level+']').append(li); return; } // If there is no UL for the LI, create it if ($('li[id='+prev_id+'] ul[id='+level+']').length == 0) { create_ul(level, id, prev_id); } else if ($('ul[id='+level+'] li[id='+id+']').length > 0) { return; } var li = $('
',{ id: id }); var a = $('',{ text: level + " - " + id, href: "nothing yet" }); li.append(a); $('li[id='+prev_id+'] ul[id='+level+']').append(li); } $.ajax({ type: "GET", url: "/sitemap_000.xml", dataType: "xml", success: parseXml }); function parseXml(xml) { URLS = new Array(new Array(), new Array(), new Array()); $(xml).find("loc").each(function(){ var url = $(this).text(); URLS[1].push(url); url = url.replace("http://", "") var url_array = url.split("/"); URLS[0].push(url_array); var rawLastMod = $(this).parent().find('lastmod').text(); var timestamp = rawLastMod.replace(/T.+/g, ''); var lastMod = formatDate(timestamp); URLS[2].push(lastMod); }); $(URLS[0]).each(function(i, url_array){ $(url_array).each(function(index, fragment){ var level = index+1; var id = fragment; if(index!=0) { var prev_id = URLS[0][i][index-1]; } else { var prev_id = null; } if(id != "") { create_li(level, id, prev_id); } }); }); } 

---

我决定回复PHP解决方案而不是Javascript。 我正在使用这个PHP脚本： http ： //www.freesitemapgenerator.com/xml2html.html

Answer 1

这是我的尝试。

基本上它使用数组来存储所有url的部分 。
例如，urlmytest.url.com/sub1/othersub2.html的处理方式如下：

 var map = ['mytest.url.com']['sub1']['othersub2.html']; 

这是可能的，因为javascript允许您使用字符串索引数组。

完整代码（只需替换你的parseXml函数并使用firebug在chrome或firefox上测试它）：