如何按价格按升序排序菜单列表

时间:2014-01-10 13:16:42

标签: jquery wordpress list

我有一个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>

1 个答案:

答案 0 :(得分:0)

您正在正确接近您的问题。您正在尝试解析HTML以获取价格,然后对其进行排序和移动。 What will happen when you change the style of your page ?

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

  1. 通过向列表项提供ID来索引您的列表项。
  2. 在数组中保留价格和ID列表。
  3. 对该数组进行排序。
  4. 根据排序列表重新构建页面。
  5. 以下是显示如何执行此操作的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我可以从你的菜单中看出你是印度人(我也是)你的物品清单让我感到饥饿^ _ ^