0

Here is an example made by Adam Laki for a Menu Builder https://codepen.io/adamlaki/pen/bZrxZO

I have incorporated a similar menu builder, the only issue i'm currently experiencing is the order of the menu but due to diligence, i can't share the current script..

The PHP/HTML Content is generated, meaning:

  <li class="menu-item" data-id="1">Home</li>
  <li class="menu-item" data-id="2">About</li>
  <li class="menu-item" data-id="3">Contact</li>
  <li class="menu-item" data-id="4">Blog</li>
  <li class="menu-item" data-id="5">Misc</li>

I can't re order through HTML/PHP, as it's looped in foreach to generate content from sql, data-id and parent-id is also generated content.

I need to re order so that misc is at the top without changing the HTML/PHP.

Please assist to what JavaScript that could change the order of this sortable menu or documentation to lead me to the right direction.

Resolved via jquery sort list based on data attribute value

Used the following 

$(".listitems.autosort").each(function(){
    $(this).html($(this).children('li').sort(function(a, b){
        return ($(b).data('position')) < ($(a).data('position')) ? 1 : -1;
    }));
});
Paul Scheller
  • 13
  • 5

1 Answers1

0

I think you must use something such this question jquery from last child to first If you don't want using server side rendering html. Insert this code in your js script at the end. So when html page will upload this jquery manipulation will change your last li "Misc" into first position.

$("#YOUR_PARENT_DIV_LI li:last-child").prependTo("#YOUR_PARENT_DIV_LI");
VolArt
  • 438
  • 2
  • 13