我想使用以下代码对给定的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 & 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 & 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>
答案 0 :(得分：1)
首先，请确保您在某处调用reOrder()函数。例如，通过在最后一个div元素之后添加此代码。
<script>reOrder();</script>
接下来，您的代码将按预期工作，但：
-找到“服装”并附加。
-找不到“礼品卡”，因为您在html中将/shop/gift-certificate/gift-card.html写成shop/gift-certificate/gift-card.html时搜索了/lookbooks（开头没有“ /”）
-在开头（lookbooks与function trying() {
// Some other observables here doing other stuff
const rectangle = Observable.interval(10)
.takeUntil(Observable.interval(1000))
.map(() => rect.attr('x', someValue + Number(rect.attr('x'))))
rectangle.filter(() => Number(rect.attr('x')) <= 5)
.subscribe(() => console.log("Done"))
rectangle.filter(() => Number(rect.attr('x')) > 5)
// if more > 5, reset the whole function back
}
的同一“ /”中找不到“外观书”
-找到“销售”并附加。
只需删除不需要的“ /”（或将它们添加到href中），您就可以开始了！
答案 1 :(得分：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 & 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 & 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>