0

サイトとそれらのサイト内のサイトのリストがあります。この出力が与えられた場合、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);

しかし、返されたオブジェクトは、同じ数の「/」を持つすべてのサイトを取得し、それらを 1 つの配列に配置しました。これはまさに私が探しているものではありません。

4

1 に答える 1