Reorder list according to the order of the given array elements

Question

I want to reorder the given HTML with the following code

 function reOrder() { var nav_groups = { GIFT_CARD: "/shop/gift-certificate/gift-card.html", LOOK_BOOKS: "/lookbooks", APPAREL: "/shop/apparel", DRESSES: "/shop/apparel/dresses", FOOTWEAR: "/shop/footwear", JEWELRY: "/shop/jewelry", ACCESSORIES: "/shop/accessories", BAGS_AND_WALLETS: "/shop/handbags", GIFTS_DECOR: "/shop/gifts-home-decor", SALE: "/shop/sale" }; var order = ["APPAREL", "GIFT_CARD", "LOOK_BOOKS", "DRESSES", "FOOTWEAR", "ACCESSORIES", "JEWELRY", "BAGS_AND_WALLETS", "GIFTS_DECOR", "SALE"]; $.each(order, function(index, value) { var nav_link = nav_groups[value]; var nav_group_selector = $(".menu li > a[href='" + nav_link + "']").closest(".menu li"); if (nav_group_selector.length !== 0) { $(".menu-all-pages-container > .menu").append(nav_group_selector); } }); return true; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="menu-all-pages-container"> <ul class="menu"> <li class=" "> <a href="shop/gift-certificate/gift-card.html">Gift Card</a> </li> <li class="menu-item menu-parent-item "> <a href="lookbooks">Look Books</a> </li> <li class="menu-item menu-item-has-children menu-parent-item "> <a href="shop/apparel">Apparel</a> <div class="nav-sublist-dropdown" style="display: none; list-style: none;"> <div class="container"> <ul> <li class="menu-item menu-item-has-children menu-parent-item " style="list- style: none;"> <a href="shop/apparel/dresses">Dresses</a> <div class="nav-sublist level1"> <ul> <li class="menu-item " style="list-style: none;"><a class="level2" data-id="41" href="shop/apparel/dresses/maxi"><span>Maxi</span></a> </li> <li class="menu-item " style="list-style: none;"><a class="level2" data-id="42" href="shop/apparel/dresses/sundresses"><span>Sundresses</span></a> </li> <li class="menu-item " style="list-style: none;"><a class="level2" data-id="44" href="shop/apparel/dresses/fit-and-flare"><span>Fit and Flare</span></a> </li> <li class="menu-item " style="list-style: none;"><a class="level2" data-id="81" href="shop/apparel/dresses/simple-sleek"><span>Simple Sleek</span></a> </li> </ul> </div> </li> <li class="menu-item menu-item-has-children menu-parent-item " style="list-style: none;"> <a class="level1" data-id="11" href="shop/apparel/tops"> <span>Tops</span></a> <div class="nav-sublist level1"> <ul> <li class="menu-item menu-item-has-children menu-parent-item " style="list- style: none;"> <a class="level2" data-id="34" href="shop/apparel/tops/sleeveless"> <span>Sleeveless</span></a> </li> <li class="menu-item " style="list-style: none;"><a class="level2" data-id="35" href="shop/apparel/tops/short-sleeve"><span>Short Sleeve</span></a> </li> <li class="menu-item " style="list-style: none;"><a class="level2" data-id="36" href="shop/apparel/tops/3-4-sleeve"><span>3/4 Sleeve</span></a> </li> <li class="menu-item " style="list-style: none;"><a class="level2" data-id="37" href="shop/apparel/tops/long-sleeve"><span>Long Sleeve</span></a> </li> <li class="menu-item " style="list-style: none;"> <a class="level2" data-id="215" href="shop/apparel/tops/kimonos-cardigans"> <span>Kimonos/Cardigans</span></a> </li> </ul> </div> </li> <li class="menu-item " style="list-style: none;"><a class="level1" data-id="229" href="shop/apparel/rompers-jumpsuits"><span>Rompers/Jumpsuits</span> </a> </li> <li class="menu-item menu-item-has-children menu-parent-item " style="list-style: none;"> <a class="level1" data-id="12" href="shop/apparel/sweaters"> <span>Sweaters</span></a> <div class="nav-sublist level1"> <ul> <li class="menu-item " style="list-style: none;"><a class="level2" data- id="50" href="shop/apparel/sweaters/pullovers"><span>Pullovers</span></a> </li> <li class="menu-item " style="list-style: none;"><a class="level2" data-id="51" href="shop/apparel/sweaters/cardigans"><span>Cardigans</span></a> </li> </ul> </div> </li> <li class="menu-item " style="list-style: none;"><a class="level1" data- id="14" href="shop/apparel/jackets-vests"><span>Jackets &amp; Coats</span></a> </li> <li class="menu-item menu-item-has-children menu-parent-item " style="list-style: none;"><a class="level1" data-id="13" href="shop/apparel/intimates"><span>Intimates</span></a> <div class="nav-sublist level1"> <ul> <li class="menu-item " style="list-style: none;"><a class="level2" data-id="287" href="shop/apparel/intimates/bralettes"><span>Bralettes</span></a> </li> <li class="menu-item " style="list-style: none;"><a class="level2" data-id="209" href="shop/apparel/intimates/camis-tanks"><span>Camis &amp; Tanks</span></a> </li> <li class="menu-item " style="list-style: none;"><a class="level2" data-id="262" href="shop/apparel/intimates/slips"><span>Slips</span></a> </li> <li class="menu-item " style="list-style: none;"><a class="level2" data-id="293" href="shop/apparel/intimates/sleepwear"><span>Sleepwear</span></a> </li> <li class="menu-item " style="list-style: none;"><a class="level2" data-id="287" href="shop/apparel/intimates/panties"><span>Panties</span></a> </li> </ul> </div> </li> <li class="menu-item menu-item-has-children menu-parent-item " style="list-style: none;"><a class="level1" data-id="15" href="shop/apparel/denim"><span>Denim</span></a> <div class="nav-sublist level1"> <ul> <li class="menu-item " style="list-style: none;"><a class="level2" data- id="56" href="shop/apparel/denim/flare"><span>Flare</span></a> </li> <li class="menu-item " style="list-style: none;"><a class="level2" data-id="88" href="shop/apparel/denim/skinny"><span>Skinny</span></a> </li> </ul> </div> </li> <li class="menu-item " style="list-style: none;"><a class="level1" data-id="16" href="shop/apparel/bottoms"><span>Bottoms</span></a> </li> <li class="menu-item " style="list-style: none;"><a class="level1" data-id="17" href="shop/apparel/shorts"><span>Shorts</span></a> </li> <li class="menu-item " style="list-style: none;"><a class="level1" data-id="18" href="shop/apparel/skirts"><span>Skirts</span></a> </li> <li class="menu-item " style="list-style: none;"><a class="level1" data-id="150" href="shop/apparel/swimwear"><span>Swimwear</span></a> </li> </ul> </div> </div> </li> <li class=" "> <a href="shop/sale">Sale</a> </li> </ul> </div> 

Answer 1

First, make sure you call the reOrder() function somewhere. For example by adding this code after your last div element.

<script>reOrder();</script>

Next, your code work as expected but :

-It find "Apparel" and append it.

-It doesn't find "gift card" because you search for /shop/gift-certificate/gift-card.html when it's written shop/gift-certificate/gift-card.html in the html (no "/" at the beginning)

-It doesn't find "look books" for the same "/" at the beginning ( /lookbooks vs lookbooks )

-It find "Sale" and append it.

Just delete those unneeded "/" (or add them in the href) and you're good to go !

Answer 2

@Nomis mentioned all the crucial points. I simply converted them into this fiddle. This works:

 function reOrder() { var nav_groups = { GIFT_CARD: "shop/gift-certificate/gift-card.html", LOOK_BOOKS: "lookbooks", APPAREL: "shop/apparel", DRESSES: "shop/apparel/dresses", FOOTWEAR: "shop/footwear", JEWELRY: "shop/jewelry", ACCESSORIES: "shop/accessories", BAGS_AND_WALLETS: "shop/handbags", GIFTS_DECOR: "shop/gifts-home-decor", SALE: "shop/sale" }; var order = ["APPAREL", "GIFT_CARD", "LOOK_BOOKS", "DRESSES", "FOOTWEAR", "ACCESSORIES", "JEWELRY", "BAGS_AND_WALLETS", "GIFTS_DECOR", "SALE"]; $.each(order, function(index, value) { var nav_link = nav_groups[value]; var nav_group_selector = $(".menu li > a[href='" + nav_link + "']").closest(".menu li"); if (nav_group_selector.length !== 0) { $(".menu-all-pages-container > .menu").append(nav_group_selector); } }); return true; } reOrder() 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="menu-all-pages-container"> <ul class="menu"> <li class=" "> <a href="shop/gift-certificate/gift-card.html">Gift Card</a> </li> <li class="menu-item menu-parent-item "> <a href="lookbooks">Look Books</a> </li> <li class="menu-item menu-item-has-children menu-parent-item "> <a href="shop/apparel">Apparel</a> <div class="nav-sublist-dropdown" style="display: none; list-style: none;"> <div class="container"> <ul> <li class="menu-item menu-item-has-children menu-parent-item " style="list- style: none;"> <a href="shop/apparel/dresses">Dresses</a> <div class="nav-sublist level1"> <ul> <li class="menu-item " style="list-style: none;"><a class="level2" data-id="41" href="shop/apparel/dresses/maxi"><span>Maxi</span></a> </li> <li class="menu-item " style="list-style: none;"><a class="level2" data-id="42" href="shop/apparel/dresses/sundresses"><span>Sundresses</span></a> </li> <li class="menu-item " style="list-style: none;"><a class="level2" data-id="44" href="shop/apparel/dresses/fit-and-flare"><span>Fit and Flare</span></a> </li> <li class="menu-item " style="list-style: none;"><a class="level2" data-id="81" href="shop/apparel/dresses/simple-sleek"><span>Simple Sleek</span></a> </li> </ul> </div> </li> <li class="menu-item menu-item-has-children menu-parent-item " style="list-style: none;"> <a class="level1" data-id="11" href="shop/apparel/tops"> <span>Tops</span></a> <div class="nav-sublist level1"> <ul> <li class="menu-item menu-item-has-children menu-parent-item " style="list- style: none;"> <a class="level2" data-id="34" href="shop/apparel/tops/sleeveless"> <span>Sleeveless</span></a> </li> <li class="menu-item " style="list-style: none;"><a class="level2" data-id="35" href="shop/apparel/tops/short-sleeve"><span>Short Sleeve</span></a> </li> <li class="menu-item " style="list-style: none;"><a class="level2" data-id="36" href="shop/apparel/tops/3-4-sleeve"><span>3/4 Sleeve</span></a> </li> <li class="menu-item " style="list-style: none;"><a class="level2" data-id="37" href="shop/apparel/tops/long-sleeve"><span>Long Sleeve</span></a> </li> <li class="menu-item " style="list-style: none;"> <a class="level2" data-id="215" href="shop/apparel/tops/kimonos-cardigans"> <span>Kimonos/Cardigans</span></a> </li> </ul> </div> </li> <li class="menu-item " style="list-style: none;"><a class="level1" data-id="229" href="shop/apparel/rompers-jumpsuits"><span>Rompers/Jumpsuits</span> </a> </li> <li class="menu-item menu-item-has-children menu-parent-item " style="list-style: none;"> <a class="level1" data-id="12" href="shop/apparel/sweaters"> <span>Sweaters</span></a> <div class="nav-sublist level1"> <ul> <li class="menu-item " style="list-style: none;"><a class="level2" data- id="50" href="shop/apparel/sweaters/pullovers"><span>Pullovers</span></a> </li> <li class="menu-item " style="list-style: none;"><a class="level2" data-id="51" href="shop/apparel/sweaters/cardigans"><span>Cardigans</span></a> </li> </ul> </div> </li> <li class="menu-item " style="list-style: none;"><a class="level1" data- id="14" href="shop/apparel/jackets-vests"><span>Jackets &amp; Coats</span></a> </li> <li class="menu-item menu-item-has-children menu-parent-item " style="list-style: none;"><a class="level1" data-id="13" href="shop/apparel/intimates"><span>Intimates</span></a> <div class="nav-sublist level1"> <ul> <li class="menu-item " style="list-style: none;"><a class="level2" data-id="287" href="shop/apparel/intimates/bralettes"><span>Bralettes</span></a> </li> <li class="menu-item " style="list-style: none;"><a class="level2" data-id="209" href="shop/apparel/intimates/camis-tanks"><span>Camis &amp; Tanks</span></a> </li> <li class="menu-item " style="list-style: none;"><a class="level2" data-id="262" href="shop/apparel/intimates/slips"><span>Slips</span></a> </li> <li class="menu-item " style="list-style: none;"><a class="level2" data-id="293" href="shop/apparel/intimates/sleepwear"><span>Sleepwear</span></a> </li> <li class="menu-item " style="list-style: none;"><a class="level2" data-id="287" href="shop/apparel/intimates/panties"><span>Panties</span></a> </li> </ul> </div> </li> <li class="menu-item menu-item-has-children menu-parent-item " style="list-style: none;"><a class="level1" data-id="15" href="shop/apparel/denim"><span>Denim</span></a> <div class="nav-sublist level1"> <ul> <li class="menu-item " style="list-style: none;"><a class="level2" data- id="56" href="shop/apparel/denim/flare"><span>Flare</span></a> </li> <li class="menu-item " style="list-style: none;"><a class="level2" data-id="88" href="shop/apparel/denim/skinny"><span>Skinny</span></a> </li> </ul> </div> </li> <li class="menu-item " style="list-style: none;"><a class="level1" data-id="16" href="shop/apparel/bottoms"><span>Bottoms</span></a> </li> <li class="menu-item " style="list-style: none;"><a class="level1" data-id="17" href="shop/apparel/shorts"><span>Shorts</span></a> </li> <li class="menu-item " style="list-style: none;"><a class="level1" data-id="18" href="shop/apparel/skirts"><span>Skirts</span></a> </li> <li class="menu-item " style="list-style: none;"><a class="level1" data-id="150" href="shop/apparel/swimwear"><span>Swimwear</span></a> </li> </ul> </div> </div> </li> <li class=" "> <a href="shop/sale">Sale</a> </li> </ul> </div>