Используйте Jquery для преобразования одного списка UL LI в иерархический вложенный список на основе класса

Question

У меня есть неупорядоченный список, который нужно объединить в иерархический список, в зависимости от класса, который был предварительно назначен каждому

.В частности, если исходный список выглядит следующим образом:

<ul>
  <li class="level-1"><a href="#">First Level Item</a></li>
  <li class="level-2"><a href="#">Second Level item</a></li>
  <li class="level-3"><a href="#">Third Level item</a></li>
  <li class="level-3"><a href="#">Third Level item</a></li>
  <li class="level-2"><a href="#">Second Level item</a></li>
  <li class="level-3"><a href="#">Third Level item</a></li>
  <li class="level-3"><a href="#">Third Level item</a></li>
  <li class="level-3"><a href="#">Third Level item</a></li>
  <li class="level-2"><a href="#">Second Level item</a></li>
  <li class="level-2"><a href="#">Second Level item</a></li>
  <li class="level-1"><a href="#">Next First Level Item</a></li>
  <li class="level-2"><a href="#">Second Level item</a></li>
  <li class="level-2"><a href="#">Second Level item</a></li>
  <li class="level-3"><a href="#">Third Level item</a></li>
  <li class="level-3"><a href="#">Third Level item</a></li>
</ul>

Мне нужно, чтобы он стал вложенным списком на основе класса каждого li, поэтому окончательный список будет перерисован как:

<ul>
  <li class="level-1"><a href="#">First Level Item</a>
    <ul>
      <li class="level-2"><a href="#">Second Level item</a>
        <ul>
          <li class="level-3"><a href="#">Third Level item</a></li>
          <li class="level-3"><a href="#">Third Level item</a></li>
        </ul>
      </li>
      <li class="level-2"><a href="#">Second Level item</a>
        <ul>
          <li class="level-3"><a href="#">Third Level item</a></li>
          <li class="level-3"><a href="#">Third Level item</a></li>
          <li class="level-3"><a href="#">Third Level item</a></li>
        </ul>
      </li>
      <li class="level-2"><a href="#">Second Level item</a></li>
      <li class="level-2"><a href="#">Second Level item</a></li>
    </ul>
  </li>
  <li class="level-1"><a href="#">Next First Level Item</a>
    <ul>
      <li class="level-2"><a href="#">Second Level item</a></li>
      <li class="level-2"><a href="#">Second Level item</a>
        <ul>
          <li class="level-3"><a href="#">Third Level item</a></li>
          <li class="level-3"><a href="#">Third Level item</a></li>
        </ul>
      </li>
    </ul>
</ul>

Поскольку я не могу запустить серверный код в CMS, которая выводит этот список, я должен реорганизовать эту клиентскую часть HTML-списка.

Я провел много часов без удачи, пытаясь написать свой собственный jQueryсоздать новую иерархию.Моей первой попыткой было использование jQuery .before для добавления дополнительных тегов </ul></li> перед классом, а затем добавление нового <ul> после тега, но я не смог вставить ни один тег <ul> <li> -- кажется, jquery добавит <p> и т. д., но не </ul></li>?

Затем я попытался использовать .wrap, чтобы поместить новый <ul></ul>, где это необходимо, но я не был достаточно умен, чтобы понять,Как выбрать и сгруппировать всех детей или внуков для упаковки.

У кого-нибудь есть намеки на то, что я должен пытаться делать?

Answer 1

Я считаю, что было бы сложно манипулировать элементами существующего списка.Скорее было бы легче сгенерировать новую разметку и заменить существующую разметку ею.

Я мог бы придумать что-то вроде этого:

    var prevlevel = 1;    
    var currentlevel;
    var newlisthtml = "";

    $("#idoful li").each(function(){
        currentlevel = parseInt($(this).attr("class").split("-")[1]);

        if(currentlevel > prevlevel) {
            newlisthtml += "<ul>";
        } else if(currentlevel < prevlevel) {
            newlisthtml += "</ul></li>";
        } else if(currentlevel == prevlevel) {
                    newlisthtml += "</li>";
            }

        newlisthtml += '<li class="level-' + currentlevel + '">' + $(this).html();
        prevlevel = currentlevel; 
    });

    $("#idoful").html(newlisthtml);

Я давно использовал jQuery,Я не проверял вышеуказанный код.Обращайтесь к нему как к алгоритму, а не к коду.Вам придется сделать что-то вроде этого.

Answer 2

Я бы начал с конца и пошел бы назад, чтобы деревья двигались вместе.

function nest_list(num) 
{
    if (num <= 1) { 
        return; 
    } else {
       var item_selector = ".level-" + num.toString();
       var parent_item_selector = ".level-" + (num - 1).toString();

       $(item_selector).each(function() {
           $parent_item = $(this).prev(parent_item_selector);

           if ($parent_item.length > 0) {
               // verify the ul
               var $ul = $parent_item.find('ul');
               if ($ul.length == 0) {
                  $ul = $('<ul></ul>').appendTo($parent_item);
               } 

               $ul.append($(this)); // moves the li
           }
       });

       nest_list(num - 1);
    }
);

nest_list(3); // number is the highest level that you want to nest from