使用jQuery对多个列表进行排序

Question

我在页面上有多个列表.列表的示例如下所示:

<ul class="effects-list">
  <li data-sorte="2">creative</li>
  <li data-sorte="1">euphoric</li>
  <li data-sorte="2">uplifted</li>
  <li data-sorte="1">energetic</li>
  <li data-sorte="0">lazy</li>
  <li data-sorte="1">focused</li>
  <li data-sorte="2">happy</li>
  <li data-sorte="0">talkative</li>
  <li data-sorte="0">giggly</li>
  <li data-sorte="0">tingly</li>
  <li data-sorte="0">hungry</li>
  <li data-sorte="0">sleepy</li>
  <li data-sorte="0">aroused</li>
</ul>

我有一个脚本将删除所有data-sorte等于0.完成后,它会将列表从最高到最低排序(再次按存储的数字排序data-sorte).然后它采取前三个选项并删除其余选项.

这是执行此操作的脚本:

$('*[data-sorte="0"]').remove();
    $(".effects-list li").sort(sort_li_effects).appendTo('.effects-list');
function sort_li_effects(a, b){
    return ($(a).data('sorte')) < ($(b).data('sorte')) ? 1 : -1;    
}
$(".effects-list li").filter( function(k, v) {
    if( k < 3 ) {
        min = parseInt($(v).data('sorte'));
        return false;
    } else
        return min > parseInt($(v).data('sorte'));
}).remove();

我遇到的问题是它根据第一个列表对所有列表进行排序.我的问题是如何修改脚本以便正确排序页面上的所有列表？

这是一个显示问题的工作代码的jsFiddle.

编辑

澄清一点.可以说我有以下列表:

<ul class="effects-list">
  <li data-sorte="2">creative</li>
  <li data-sorte="1">euphoric</li>
  <li data-sorte="2">uplifted</li>
  <li data-sorte="1">energetic</li>
  <li data-sorte="0">lazy</li>
  <li data-sorte="1">focused</li>
  <li data-sorte="1">happy</li>
  <li data-sorte="0">talkative</li>
  <li data-sorte="0">giggly</li>
  <li data-sorte="0">tingly</li>
  <li data-sorte="0">hungry</li>
  <li data-sorte="0">sleepy</li>
  <li data-sorte="0">aroused</li>
</ul>

我希望它显示creative,uplifted,euphoric,energetic,focused和happy那些由编号顶部的选项.euphoric,energetic,focused和happy都绑在1这样我想告诉他们.原始脚本执行此操作.

Answer 1

我稍微修改了你的脚本.

$('*[data-sorte="0"]').remove();
$(".effects-list").each(function() {
    var $list = $(this),
        $items = $list.find('li'),
        sortes = [];

    $items.detach().sort(sort_li_effects).filter(function(i) {
        var sorte = $(this).data('sorte');
        if (i < 3) {
            sortes.push(sorte);
            return true;
        }

        return sortes.indexOf(sorte) >= 0;
    }).appendTo($list);
});

function sort_li_effects(a, b) {
    return ($(a).data('sorte')) < ($(b).data('sorte')) ? 1 : -1;
}

http://jsfiddle.net/KK2bV/5/或http://jsfiddle.net/KK2bV/6/或 http://jsfiddle.net/KK2bV/3/

主要差异:

• 它贯穿li始终list并正确排序
• 它一次性删除所有不必要的项目 li:gt(2)