Can I use jQuery to easily shift li elements up or down?

Question

I have a menu like this:

    
 
        
Home 
 
         


        

Answer 1

You can also use display: flex on the parent then you can use order

function reset()
{
  jQuery("#a").css("order", 10);
  jQuery("#b").css("order", 20);
  jQuery("#c").css("order", 30);
}

function reorder1()
{
  jQuery("#a").css("order", 30);
  jQuery("#b").css("order", 20);
  jQuery("#c").css("order", 10);
}

function reorder2()
{
  jQuery("#a").css("order", 30);
  jQuery("#b").css("order", 10);
  jQuery("#c").css("order", 20);
}

#main { display: flex; }
#a { color: red; }
#b { color: blue; }
#c { color: green; }

    
Foo
    
Bar
    
Baz


Reset
Reorder 1
Reorder 2