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的{{1}}。完成此操作后，它会将列表从最高到最低排序（再次按0中存储的数字排序）。然后它采取前三个选项并删除其余选项。

以下是执行此操作的脚本：

data-sorte

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

Here is a jsFiddle带有显示问题的工作代码。

修改

澄清一点。假设我有以下列表：

$('*[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();

我希望它能展示<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，因此我想向他们展示所有内容。原始脚本就是这样做的。

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)

Answer 2

您可以通过以下三个步骤执行此操作：

$('.effects-list').replaceWith(function() {
  // step 1: grab list of items, remove all zero values and sort descending
  var $items = $(this).children()
    .filter(function() {
      return $(this).data('sorte') !== 0;
    }).sort(function(a, b) {
      var a_value = $(a).data('sorte'),
      b_value = $(b).data('sorte');

      if (a_value != b_value) {
        return a_value > b_value ? -1 : 1;
      }
      return 0;
    }),
  current,
  levels = 0,
  index = 0;

  // step 2: work out the top three
  while (index < $items.length && levels < 3) {
    var value = $items.eq(index).data('sorte');
    if (current === null || current != value) {
      current = value;
      ++levels;
    }
    ++index;
  }

  // step 3: replace the contents      
  return $items.slice(0, index);
});

另请参阅：.replaceWith()

Demo

Answer 3

我不喜欢jQuery，但是我可以提供一个javascript解决方案。我建议您构建HTML，以便每个UL都有一个可枚举的ID。所以：

 <ul class="effects-list" id="list1"> ... </ul>
 <ul class="...-list" id="list2">...<ul>

等等。然后使用for循环遍历所有列表。假设有10个列表：

 for (var i = 0; i < 10; i++) {
      var list = document.getElementById("list"+i);
 // Then run your jQuery code on the list 10 times.
 }

这有帮助吗？

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

3 个答案: