Question

我正在使用名为Perch的CMS，我需要将此动态加载的列表排序为不同的顺序。我不能在CMS方面做到这一点，我希望找到一种方法在前端使用jQuery来做到这一点。有可能的？以下是CMS提供代码的方式。

<ul>
    <li><a href="archive-r.php?tag=appetizers" rel="tag">Appetizers (4)</a></li>
    <li><a href="archive-r.php?tag=beverages" rel="tag">Beverages (2)</a></li>
    <li><a href="archive-r.php?tag=breakfast" rel="tag">Breakfast (2)</a></li>
    <li><a href="archive-r.php?tag=desserts" rel="tag">Desserts (4)</a></li>
    <li><a href="archive-r.php?tag=entrees" rel="tag">Entrees (14)</a></li>
    <li><a href="archive-r.php?tag=salads" rel="tag">Salads (14)</a></li>
    <li><a href="archive-r.php?tag=side-dishes" rel="tag">Side Dishes (8)</a></li>
    <li><a href="archive-r.php?tag=soups" rel="tag">Soups (1)</a></li>
</ul>

现在它按字母顺序排列。我需要它来反映以下顺序。

开胃菜
汤类
沙拉
主菜
配菜
饮料
甜点

非常感谢任何帮助。

Answer 1

有关示例，请参阅http://jsfiddle.net/29CGB/3/。您需要一个索引进行排序，在这种情况下，您已定义了自定义排序。由于标签的href是唯一的，我使用它来定义排序。这是代码，请注意我没有将所有项添加到数组中：

var sortOrder = ['appetizers', 'soups', 'salads', 'entrees', 'side-dishes']; //make sure to finish this
var newList = $('ul li').sort(function (li1, li2) {
    return sortOrder.indexOf($(li1).find('a').attr('href').replace('archive-r.php?tag=', '')) > sortOrder.indexOf($(li2).find('a').attr('href').replace('archive-r.php?tag=', '')) ?  1 : -1;
});
$('ul').html(newList);

自定义使用jQuery从CMS中排序li项目

1 个答案: