Geek asks and answers

Use jquery to convert a single LL LI list into a class-based hierarchical nested list

I have an unordered list that needs to be translated into a hierarchical list, depending on the class that was previously assigned to each

. In particular, if the source list is as follows:
<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>

I need it to become a nested list based on the class of each li, so the final list is highlighted as:

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

Since I cannot run the server-side code on the CMS that displays this list, I have to reorganize this client side of the HTML list.

, jQuery, . jQuery. , </ul></li> , <ul> , <ul> <li> - , jquery <p> .., </ul></li>?

.wrap, <ul></ul> , , , , , .

- , ?

+3
2

, . , .

- :

    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. . , . - .

+3

, .

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
0

More articles:


All Articles