将 url 列表转换为导航窗格

Turning list of urls into a navigation pane

本文关键字：导航 转换 url 列表      更新时间：2023-09-26

我有一个网站列表和这些网站中的网站。如何在给定此输出的情况下使用 ul 和 li 元素创建导航树？

https://hosted.demo.ca
https://hosted.demo.ca/academic
https://hosted.demo.ca/academic/bm
https://hosted.demo.ca/academic/cmtte
https://hosted.demo.ca/academic/dm
https://hosted.demo.ca/academic/pm
https://hosted.demo.ca/archive
https://hosted.demo.ca/associations
https://hosted.demo.ca/associations/bm
https://hosted.demo.ca/associations/dm
https://hosted.demo.ca/associations/pm
https://hosted.demo.ca/cdn
https://hosted.demo.ca/cf_test
https://hosted.demo.ca/charity
https://hosted.demo.ca/charity/bod
https://hosted.demo.ca/charity/bod/boarddocs
https://hosted.demo.ca/charity/bod/mtgmaterial
https://hosted.demo.ca/clite
https://hosted.demo.ca/clite/admin
https://hosted.demo.ca/company
https://hosted.demo.ca/company/finance
https://hosted.demo.ca/company/hr
https://hosted.demo.ca/company/hr/b1
https://hosted.demo.ca/company/hr/b1/b2
https://hosted.demo.ca/company/hr/b1/b2/b3
https://hosted.demo.ca/company/mrkting
https://hosted.demo.ca/demo

我想把这个列表变成这样的东西： 

<UL>
  <li>Academic
    <ul>
      <li>BM</li>
      <li>CMTTE</LI>
      <li>DM</li>
      <li>PM</li>
  </ul>
  </li>
</ul>
<ul>
  <li>ARCHIVE</li>
</UL>
<ul>
  <LI>ASSOCIATIONS
    <ul>
    <li>BM</li>
    <li>DM</LI>
    <li>PM</li>
    </ul>
  </LI>
</ul>

有人建议我尝试这样的事情： 

  var map = {}; //init the map
  var web = $(xData.responseXML).find("Web");
  for (var i = 0; i < web.length; i++) {
  //we create a index for our links based on the depth of them by `/`
    var m = web[i].attributes['Url'].value.substring(23, web[i].attributes['Url'].value.length).split('/').length; 
    map[m] = map[m] || []; //make sure we leave alone the old values if there is none init with new array
    map[m].push(web[i].attributes['Url'].value); //push new value to node
  }
  console.log(map);

但是它返回的对象获取所有具有相同数量"/"的站点，并将它们放在一个数组中。这不完全是我想要的。

看看 

var map = {}; //init the map
  var web = $(xData.responseXML).find("Web")
                .map(function () {
                    return $(this).attr('Url');
                });
  // create map for later use
  for (var i = 0; i < web.length; i++) {
      var item = web[i],
          parts = item.split('/'),
          domain = parts.splice(0, 3).join('/'),
          current;
      if (!map[domain]) map[domain] = {};
      current = map[domain];
     for (var index = 0, length = parts.length; index < length; index++) {
          var part = parts[index];
          if (!current[part]) {
              current[part] = {};
          }
          current = current[part];
      }
  }
  console.log(map);

  // create DOM method
  function traverseMap(obj, element) {
      for (var index in parts) {
          var li = $('<li>', {
              text: item
          }).appendTo(element);
          if (!$.isEmptyObject(obj[item])) {
              var ul = $('<ul>').appendTo(li);
              traverseMap(obj[item], ul);
          }
      }
  }
  // invoke the DOM creating function
  traverseMap(map, $('#root'));

http://jsfiddle.net/4gJ9T/演示

并进行小的修改以保存/显示完整的网址（以及链接）

http://jsfiddle.net/4gJ9T/2/演示

相关文章：