Превращение списка URL в панель навигации

Question

Превращение списка URL в панель навигации

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);

Но возвращаемый им объект занял все сайты с одинаковым числом "/" и помещал их в один массив. Это не совсем то, что я ищу.

Batman 20 окт. 2013, в 01:45

Источник

2

А ты пробовал что-нибудь?
Mario Sannum 19 окт. 2013, в 23:27
0

Я обновил исходное сообщение, чтобы показать, что я пытался
Batman 19 окт. 2013, в 23:32
0

Он опубликовал этот «вопрос» несколько раз. Он вампир.
whitehat101 20 окт. 2013, в 00:26
0

Ваша наценка на листинг просто великолепна. Списки внутри списков.
user2824854 20 окт. 2013, в 00:34
0

То, что я пытаюсь сделать, то же самое, но проблемы в каждом вопросе разные.
Batman 20 окт. 2013, в 00:34
0

@VilleRouhiainen, я думал, что именно так и должен был поступить. Разве это не то, как html-меню структурированы? Я открыт для того, чтобы структурировать это по-другому, если это облегчит задачу.
Batman 20 окт. 2013, в 00:35
1

@ Бэтмен, да, вы могли бы сделать свой список намного проще. Я создаю решение для вас на данный момент, так что подождите секунду. :)
user2824854 20 окт. 2013, в 00:39
1

@ Бэтмен, ну, Габи уже опубликовала свое решение, я больше не вижу необходимости публиковать мое, в любом случае, у меня более сложный подход, и он отвечает лучше, чем мой.
user2824854 20 окт. 2013, в 01:35
1

@VilleRouhiainen спасибо, что нашли время ответить. Ценить это.
Batman 20 окт. 2013, в 01:50

Показать ещё 7 комментариев

Теги:

javascript

jquery

html

1 ответ

Ещё вопросы

Я обновил исходное сообщение, чтобы показать, что я пытался
Он опубликовал этот «вопрос» несколько раз. Он вампир.
Ваша наценка на листинг просто великолепна. Списки внутри списков.
То, что я пытаюсь сделать, то же самое, но проблемы в каждом вопросе разные.
@VilleRouhiainen, я думал, что именно так и должен был поступить. Разве это не то, как html-меню структурированы? Я открыт для того, чтобы структурировать это по-другому, если это облегчит задачу.
@ Бэтмен, да, вы могли бы сделать свой список намного проще. Я создаю решение для вас на данный момент, так что подождите секунду. :)
@ Бэтмен, ну, Габи уже опубликовала свое решение, я больше не вижу необходимости публиковать мое, в любом случае, у меня более сложный подход, и он отвечает лучше, чем мой.
@VilleRouhiainen спасибо, что нашли время ответить. Ценить это.

Gabriele Petrioli · Accepted Answer · 2013-10-19T21-58-00.000Z

Посмотри на

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/

И с небольшими изменениями, чтобы удерживать/показывать полный URL-адрес (как ссылки)

Демо на http://jsfiddle.net/4gJ9T/2/

Спасибо за ответ. Это похоже на то, что я пытаюсь достичь. Я пытался сделать это с моим кодом, но теперь объект возвращается пустым. Я не уверен, что я ошибся где-то в реализации. Вот что я попробовал: jsfiddle.net/TTVFy
@Batman, в вашем коде вам нужно изменить $('data') на $(xData.responseXML) или любую $(xData.responseXML) переменную, в которой вы храните свои данные XML ..
@Batman, кроме того, вам нужно передать элемент ul в метод traverseMap а не в div потому что мы добавляем элементы li и они могут существовать только внутри ul .
да, вы правы, эти изменения исправили вещи прямо сейчас. Большое спасибо за это. У меня есть еще один вопрос. Данные XML содержат атрибут для каждого элемента <web> с именем Title. Если бы я хотел использовать заголовок сайта вместо проанализированного значения, как я мог бы немного изменить это?
Я внес некоторые изменения в ваше решение. Я понял, что ваше решение проанализировало URL, чтобы дать каждому пользователю текст / заголовок. Поскольку элемент <web> XML уже имеет атрибут «Заголовок», этот шаг не требуется. Я получил заголовок из XML, добавил его к объекту и использовал его для моего текста элемента списка. Вот модификация: jsfiddle.net/kHwZH/1 Большое спасибо за вашу помощь в этом!
в исходном коде есть ошибка. for (var index in parts) код for (var index in parts) должен быть for (var index = 0, length = parts.length; index < length; index++) код for (var index = 0, length = parts.length; index < length; index++) для кода создания карты
Я внесу изменения, но, похоже, работает, хотя
Хм, да, я внес изменения, но они больше не работают. Вероятно, потому что я сделал несколько изменений и использую код из второй демонстрации. Взгляните на мой jsfiddle из моего предыдущего поста, он показывает, что именно я использую. Возможно, изменение не является необходимым?