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

我在一页上有多个列表。列表示例如下所示：

<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>

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

使用显示问题的工作代码

编辑

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

<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>

创意
兴高采烈
已提升
精力充沛
懒惰
重点关注
快乐
健谈
咯咯地笑

饥饿
困倦

---

我希望它能表现出

创意

，

振奋

，

愉悦

，

精力充沛

，

专注

和

快乐

，因为这些都是按数字排列的最佳选择<代码>兴高采烈，

精力充沛

，

专注

和

快乐

都在

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;
}

$（'*[data sorter=“0”]'）。删除（）；
$（“.effects list”）。每个（函数（）{
var$list=$（此），
$items=$list.find（'li'），
分拣机=[]；
$items.detach（）.sort（sort_li_effects）.filter（函数（i）{
var sorter=$（this）.data（'sorter'）；
如果（i<3）{
分拣机。推送（分拣机）；
返回true；
}
返回分拣机。indexOf（分拣机）>=0；
}).附件（$清单）；
});
函数排序效果（a，b）{
返回（$（a）.数据（'sorter'））<（$（b）.数据（'sorter'））？1:-1；
}

或

主要区别：

• 它在每个

  列表中通过
  li
  ，并正确排序

• 它使用

  li:gt（2）

---

我不喜欢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.
 }

for（变量i=0；i<10；i++）{
var list=document.getElementById（“list”+i）；
//然后在列表上运行jQuery代码10次。
}

---

这有帮助吗？

您可以通过以下三个步骤来完成：

$('.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);
});

$（'.effects list'）.replaceWith（函数（）{
//步骤1：获取项目列表，删除所有零值并按降序排序
var$items=$（this.children（）
.filter（函数（）{
返回$（this）.data（'sorter'）！==0；
}).排序（功能（a、b）{
变量a_值=$（a）.data（'sorter'），
b_值=$（b）.数据（'sorter'）；
如果（a_值！=b_值）{
返回a_值>b_值？-1:1；
}
返回0；
}),
现在的
级别=0，
指数=0；
//第二步：找出前三名
而（索引<$items.length&&levels<3）{
var值=$items.eq（index.data（'sorter'）；
如果（当前===null | |当前！=值）{
电流=值；
++水平；
}
++指数；
}
//步骤3：更换内容
返回$items.slice（0，索引）；
});

另见：

---

循环每个

效果列表

并收集该列表实例的

li

，仅用于排序。如果有4个“2”s，您如何处理第4个“2”@bloodyKnuckles-它将显示前三个数字，如果您说它们是4个“2”，它将显示所有四个值，其中有2个，没有其他内容。有意义吗？我会避免要求人们不要对答案投反对票。对我来说，发布一个非jQuery解决方案是可以的，只要它解决了问题，并且OP没有指定他们只寻找jQuery解决方案。一个问题是，如果数字中有联系，我的原始脚本将显示三个以上的项。换句话说，

li

中的

data sorter

的值为2,2,1,1,1。我想展示所有这些

li

元素，因为它们是最热门的选项，即使有平局。这有意义吗？使用

$（this.html（）

显示所有

li

元素与前三名（包括领带）的对比。@Lynda我的意思是

$（this.html（items）。明白了。=>它用一个数字显示所有
li
元素。我在尝试实现脚本时遇到了一个问题。问题是我的原始脚本会显示三个以上的项目，如果在数字中有联系。换句话说，li中的
数据分类器
的值为2,2,1,1,1。我想展示所有这些
li
元素，因为它们是最热门的选项，即使有平局。这有意义吗？@Lynda:那么标准是什么呢？为什么它不是
2 1
？如果它是
2
，它会改变什么吗？我试图在编辑中澄清我的问题。如果存在
22
，它将只显示那些，但是，如果存在
221
，它将显示所有这些。另一个例子：我们有
432211
我想显示
43222
。@Jack:根据OP的解释，它确实工作正常。对于
4 4 2 2 1
来说，预期结果是
4 4 2
，即前3条记录，包括最小值的关系。@zerkms Ahhh，这是您绝对正确的解释：）
$('.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);
});