javascript - 使用 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>

我有一个脚本可以删除所有等于 0 的 data-sorte。完成后，它将列表从最高到最低排序(同样按照 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();

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

Here is a 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>

我希望它表现出创意、振奋、欣快、精力充沛、专注 和 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/

主要区别:

• 它在每个 list 中遍历 li 并正确排序
• 它使用 li:gt(2)
一次删除所有不需要的项目