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

【问题标题】：Custom Sort li items from CMS using jQuery使用 jQuery 从 CMS 自定义排序 li 项目
【发布时间】：2013-08-26 22:23:10
【问题描述】：

我正在使用一个名为 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>

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

开胃菜
汤
沙拉
主菜
配菜
饮料
甜品

非常感谢任何帮助。

【问题讨论】：

标签： jquery sorting content-management-system

【解决方案1】：

有关示例，请参阅 http://jsfiddle.net/29CGB/3/。您需要一个索引来排序，在这种情况下，您已经定义了一个自定义排序。由于 a 标签的 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);

【讨论】：