我有一个WP网站列出菜单项,我需要一个脚本,将列表重新排列成加入价格。问题是页面上有多个列表,列表中包含div。
JS小提琴如下 http://jsfiddle.net/msZ98/89/ 更新了jsfiddle<div class="grid2column">
<div id="menu-widget-no-link-2" class="widget menu-widget menu-items-no-link">
<h3 class="header-underline">Vegetarian starters</h3>
<ul class="menu-items">
<li>
<div class="grid2column">Lounge mix vegetarian platter*</div>
<div class="grid2column lastcolumn">£9.95</div>
<div class="clearfix"></div>
<div class="item-description-menu">combination of starters including onion bhaji, samosa, crispy baji, chilli paneer and mogo</div>
</li>
<li>
<div class="grid2column">Garlic chilli mushroom*</div>
<div class="grid2column lastcolumn">£5.50</div>
<div class="clearfix"></div>
<div class="item-description-menu">Stir firied mushroom with green chilli, capsicum, onion, tomato and spring onion</div>
</li>
<li>
<div class="grid2column">Paneer tikka*</div>
<div class="grid2column lastcolumn">£6.50</div>
<div class="clearfix"></div>
<div class="item-description-menu">Tandoor cooked Indian cheese chunks marinated in a blend of spices</div>
</li>
<li>
<div class="grid2column">Vegetable momo*</div>
<div class="grid2column lastcolumn">£5.75</div>
<div class="clearfix"></div>
<div class="item-description-menu">Steamed dumplings stuffed with vegetables mince and a blend of Nepali spices</div>
</li>
<li>
<div class="grid2column">Crispy bhindi *</div>
<div class="grid2column lastcolumn">£4.75</div>
<div class="clearfix"></div>
<div class="item-description-menu">Crispy fried okra marinated in special spices</div>
</li>
<li>
<div class="grid2column">Crispy bhaji *</div>
<div class="grid2column lastcolumn">£4.25</div>
<div class="clearfix"></div>
<div class="item-description-menu">Sliced potato dipped in spicy batter and deep fried</div>
</li>
<li>
<div class="grid2column">Aloo papdi chaat *</div>
<div class="grid2column lastcolumn">£3.95</div>
<div class="clearfix"></div>
<div class="item-description-menu">Baby potato and chick pea salad served with yoghurt and tamarind chutney</div>
</li>
</li>
<li>
<div class="grid2column">Vegetable samosa</div>
<div class="grid2column lastcolumn">£3.00</div>
<div class="clearfix"></div>
<div class="item-description-menu">Popular Indian savoury pastry filled with vegetables and spices</div>
</li>
</ul>
</div>
<div class="menu-spacer"></div>
<div id="menu-widget-no-link-4" class="widget menu-widget menu-items-no-link">
<h3 class="header-underline">Non vegetarian starters</h3>
<ul class="menu-items">
<li>
<div class="grid2column">Tandoor Jhinga lasoni**</div>
<div class="grid2column lastcolumn">£11.95</div>
<div class="clearfix"></div>
<div class="item-description-menu">Tandoor cooked succulent king prawns marinated in garlic, coriander and spices</div>
</li>
<li>
<div class="grid2column">Ajwani Fish tikka*</div>
<div class="grid2column lastcolumn">£7.95</div>
<div class="clearfix"></div>
<div class="item-description-menu">Succulent pieces of fish marinated in ajwani and spices and tandoor cooked</div>
</li>
<li>
<div class="grid2column">Lamb chops**</div>
<div class="grid2column lastcolumn">£4.95</div>
<div class="clearfix"></div>
<div class="item-description-menu">Lamb chops marinated in yoghurt and spices and tandoor cooked</div>
</li>
<li>
<div class="grid2column">Chicken/Lamb chilli**</div>
<div class="grid2column lastcolumn">£6.95/7.95</div>
<div class="clearfix"></div>
<div class="item-description-menu">Stir fried boneless chicken or lamb with green chilli, capsicum, onion, tomato and spring onion</div>
</li>
<li>
<div class="grid2column">Chicken/Lamb momo**</div>
<div class="grid2column lastcolumn">£5.95/6.25</div>
<div class="clearfix"></div>
<div class="item-description-menu">Steamed dumplings stuffed with chicken or lamb mince and Nepali spices</div>
</li>
<li>
<div class="grid2column">Murg tikka*</div>
<div class="grid2column lastcolumn">£6.25</div>
<div class="clearfix"></div>
<div class="item-description-menu">Succulent pieces of boneless chicken breast marinated in spices and tandoor cooked</div>
</li>
<li>
<div class="grid2column">Murg Tandoori *</div>
<div class="grid2column lastcolumn">£5.95</div>
<div class="clearfix"></div>
<div class="item-description-menu">Tandoor cooked chicken on the bone marinated in freshly ground spices</div>
</li>
<li>
<div class="grid2column">Peri Peri wings*</div>
<div class="grid2column lastcolumn">£5.75</div>
<div class="clearfix"></div>
<div class="item-description-menu">Chicken wings marinated in special peri peri sauce and tandoor cooked</div>
</li>
<li>
<div class="grid2column">Chicken Pakora**</div>
<div class="grid2column lastcolumn">£4.50</div>
<div class="clearfix"></div>
<div class="item-description-menu">Deep fired chicken chunks marinated in spices and special batter</div>
</li>
<li>
<div class="grid2column">Lamb samosa*</div>
<div class="grid2column lastcolumn">£3.50</div>
<div class="clearfix"></div>
<div class="item-description-menu">Cripsy Indian savoury pastry filled with minced lamb and spices</div>
</li>
</ul>
</div>
<div class="menu-spacer"></div>
答案 0 :(得分:0)
您正在正确接近您的问题。您正在尝试解析HTML以获取价格,然后对其进行排序和移动。 What will happen when you change the style of your page ?
有很多方法可以解决您的问题。我的方法是:
以下是显示如何执行此操作的JavaScript。 I also made this JSFIDDLE link which shows the result.请注意,我只完成了“素食”清单部分。如果你理解我的代码,对你的非veg部分做同样的事情将是件小事。
$(document).ready(function() {
$("#sPrice").click(function() {
var vegPrice = [
{key: 9.95, value: "1"},
{key: 5.50, value: "2"},
{key: 6.50, value: "3"},
{key: 5.75, value: "4"},
{key: 4.75, value: "5"},
{key: 4.25, value: "6"},
{key: 3.95, value: "7"},
{key: 3.00, value: "8"}
];
var sortedVegPrice = vegPrice.sort(function (a, b) {
return a.key >= b.key;
});
var lastInjected = "vegmenu";
$.each(sortedVegPrice, function( index, value ) {
$("#" + value.value).insertAfter($("#" + lastInjected));
lastInjected = value.value;
});
});
});
BTW我可以从你的菜单中看出你是印度人(我也是)你的物品清单让我感到饥饿^ _ ^