如何按照强化订单的价格订购菜单列表

Question

我有一个WP网站，列出菜单项，我需要一个脚本，将重新安排列表进入价格。问题是页面上有多个列表，并且列表包含div。下面 http://jsfiddle.net/msZ98/89/

JS小提琴更新的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> 

Answer 1

您不正确接近你的问题。您试图解析您的HTML以获取您的价格，然后对其进行排序并移动它们。 What will happen when you change the style of your page ?

有很多方法可以解决您的问题。我的方法是这样的：

1. 索引你的列表项目给他们编号。
2. 保留数组中的价格和ID列表。
3. 对该数组进行排序。
4. 根据排序列表重构您的页面。

下面是显示如何做到这一点的JavaScript。 I also made this JSFIDDLE link which shows the result.请注意，我只做了你的“素食”列表部分。如果你了解我的代码，那么为你的非蔬菜部分做同样的事情将是小菜一碟。

$(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，我可以从你的菜单告诉你是一个印度人（我也是），而且您的产品清单我都饿了^ _^