Build a new list from existing with javascript or php

356

I want to create breadcrumbs with dropdown menu for my site

I need to convert this existing list into

<div class="menu">
  <ul>
    <li>
      <a href="#">GRANDPARENT A</a> <!-- comment -->
        <ul>
          <li><a href="#?AAA">PARENT A</a> <!-- comment -->
            <ul>
              <li><a href="#">CHILD A</a>
              </li>
              <li><a href="#">child b</a>
            </ul>
          </li>
          <li><a href="">parent b</a>
          </li>
        </ul>
    </li>
    <li>
      <a href="#">grandparent b</a> <!-- comment -->
    </li>
</ul>
</div>

this format (including adding a class to the current path):

<li>
 <a href="#">GRANDPARENT A</a> <!-- comment -->
 <ul>
   <li>
    <a href="#">grandparent b</a> <!-- comment -->
   </li>
 </ul>
</li>
<li><a href="#?AAA">PARENT A</a> <!-- comment -->
 <ul>
  <li><a href="">parent b</a>
  </li>
 </ul>
</li>       
<li><a href="#">CHILD A</a>
 <ul>
  <li><a href="#">child b</a>
  </li>
 </ul>
</li>

I tried a lot but could not get a good result. I would prefere php but could only get next to a solution in js.

485

Answer

Solution:

That is the dirty solution I have found up to now (it also filters out links where

has the class unlinked and with empty hrefs):

            var url = window.location.href; //.split('?')[0];
            var currentItem = $(".menu").find("[href$='" + url +  "']");
            var breadcrumString = "";
            var parrentItem = "<a href='/'>Start</a>";
            var currentSubItems = "";
            var breadcrumbStringSub = "";                   
            if (currentItem.parent("li").children().children().length > 0){
                currentSubItems = currentItem.parent("li").children().children();
                breadcrumbStringSub += '<ul>';
                    currentSubItems.each(function() {
                            if (($(this).children("a")[0]) && $(this).children("a").get(0).outerHTML != '<a href=""></a>' && $(this).get(0).className != 'unlisted'){
                            breadcrumbStringSub += "<li>" +
                            $(this).children("a").get(0).outerHTML +
                            "</li>";
                            } else {};                          
                        }); 
                    breadcrumbStringSub += "</ul>"; 
            breadcrumbStringSub += '</ul>';                     
                }
            $(currentItem.parents("li").get().reverse()).each(function () {
                if ($(this).parent().children().not(this).length > 0){
                 breadcrumString += "<li>" + parrentItem;
                 $(this).children("a").get(0).outerHTML;
                 $(this).parent().children().each(function() {                      
                  if ($(this).children("a")[0] && $(this).children("a").get(0).outerHTML != '<a href=""></a>' && $(this).get(0).className != 'unlisted'){
                    breadcrumString += "<li><a href='" +
                    $(this).children("a")[0] +  "'>" +
                    $(this).children("a").html() + "</a>" +
                    "</li>";
                  } else {};
                }); 
                breadcrumString += "</ul>"; 
                } else {
                breadcrumString += "<li>" + parrentItem;                
                }
                breadcrumString += "</li>";     
                parrentItem = $(this).children("a").get(0).outerHTML;
            });     
            breadcrumString += '<li>' + parrentItem + breadcrumbStringSub + '</li>';
            $(".breadcrumb").append(breadcrumString);
            $(".breadcrumb li a").not(".breadcrumb li ul li a").addClass("current")

People are also looking for solutions to the problem: I want to get data from two different table in php with their id and special characters

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question