javascript - 根据给定数组元素的顺序重新排序列表

Question

我想使用以下代码重新排序给定的 HTML

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>

标签： javascriptjqueryarrays

Answer 1

@Nomis 提到了所有关键点。我只是把它们变成了这个小提琴。这有效：

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>