Javascript 按数据属性显示列表中前三项

我有一个使用数据属性按JS排序的列表。列表如下所示：

<li data-sortm="4">Migraines</li>
<li data-sortm="2">Stress</li>
<li data-sortm="2">Depression</li>
<li data-sortm="1">Anxiety</li>
<li data-sortm="1">Lack of Appetite</li>
<li data-sortm="1">Muscle Spasms</li>
<li data-sortm="0">Nausea</li>
<li data-sortm="0">Insomnia</li>
<li data-sortm="0">Pain</li>
<li data-sortm="0">PMS</li>
<li data-sortm="0">Seizures</li>
<li data-sortm="0">Fatigue</li>

<li data-sortm="4">Migraines</li>
<li data-sortm="2">Stress</li>
<li data-sortm="2">Depression</li>

<li data-sortm="4">Migraines</li>
<li data-sortm="3">Pain</li>
<li data-sortm="2">Stress</li>
<li data-sortm="2">Depression</li>

偏头痛 压力

抑郁症

焦虑 食欲不振 肌肉痉挛

恶心

失眠 疼痛

PMS

癫痫发作 疲劳 我想做的是显示前三项，隐藏或删除列表的其余部分。例如，在上面的列表中，前三名如下所示：

<li data-sortm="4">Migraines</li>
<li data-sortm="2">Stress</li>
<li data-sortm="2">Depression</li>
<li data-sortm="1">Anxiety</li>
<li data-sortm="1">Lack of Appetite</li>
<li data-sortm="1">Muscle Spasms</li>
<li data-sortm="0">Nausea</li>
<li data-sortm="0">Insomnia</li>
<li data-sortm="0">Pain</li>
<li data-sortm="0">PMS</li>
<li data-sortm="0">Seizures</li>
<li data-sortm="0">Fatigue</li>

<li data-sortm="4">Migraines</li>
<li data-sortm="2">Stress</li>
<li data-sortm="2">Depression</li>

<li data-sortm="4">Migraines</li>
<li data-sortm="3">Pain</li>
<li data-sortm="2">Stress</li>
<li data-sortm="2">Depression</li>

偏头痛 压力

抑郁症

这里有一个问题，如果我们有这样的设置，我希望显示前三个：

<li data-sortm="4">Migraines</li>
<li data-sortm="2">Stress</li>
<li data-sortm="2">Depression</li>
<li data-sortm="1">Anxiety</li>
<li data-sortm="1">Lack of Appetite</li>
<li data-sortm="1">Muscle Spasms</li>
<li data-sortm="0">Nausea</li>
<li data-sortm="0">Insomnia</li>
<li data-sortm="0">Pain</li>
<li data-sortm="0">PMS</li>
<li data-sortm="0">Seizures</li>
<li data-sortm="0">Fatigue</li>

<li data-sortm="4">Migraines</li>
<li data-sortm="2">Stress</li>
<li data-sortm="2">Depression</li>

<li data-sortm="4">Migraines</li>
<li data-sortm="3">Pain</li>
<li data-sortm="2">Stress</li>
<li data-sortm="2">Depression</li>

偏头痛 疼痛 压力

抑郁症

我想显示所有四个，因为最后两个是相同的数字

如何使用jQuery实现这一点

我曾考虑过使用正则表达式，因为我认为这可能是一种方法，但正则表达式并不是一个我认为易于使用的领域

下面是我用来对列表排序的代码：

$(".medical-list li").sort(sort_li_medical).appendTo('.medical-list');
  function sort_li_medical(a, b){
    return ($(a).data('sortm')) < ($(b).data('sortm')) ? 1 : -1;    
}

$（“.medical list li”）.sort（sort_li_medical）.附录（“.medical list”）；
功能分类（a、b）{
返回（$（a）.data（'sortm'））<（$（b）.data（'sortm'））？1:-1；
}

注意：我使用的是jQuery的v2.1

var prevVal = -1;

var $collection = $('li[data-sortm]');
var $collectionToRemove = $collection.filter(function(index) {
  var thisVal = $(this).data('sortm');

  // if this is the 4 item or more and prev value != thisValue
  if ( index > 3 && prevVal != thisVal ) {
    prevVal = thisVal;
    return true;
  }
  prevVal = thisVal;
  return false;
});

$collectionToRemove.remove();

不是最快也不是最漂亮的代码，但我希望它能解释这个过程

在这里，我对你要找的东西做了一个简单的说明

使用

.filter（）

函数，并将

.hide（）

应用于所有与顶层不匹配的对象

var min = 0;
$(".medical-list li").filter( function(k, v) {
    if( k < 3 ) { //Top 3 will be shown
        min = parseInt($(v).data('sortm'));
        return false;
    } else //Anything else must equal to third one, or it's filtered
        return min > parseInt($(v).data('sortm'));
}).hide(); //Hide all that are not in the top 3

var最小值=0；
$（“.medical list li”）.filter（函数（k，v）{
如果（k<3）{//将显示前3位
min=parseInt（$（v）.data（'sortm'）；
返回false；
}else//任何其他值必须等于第三个值，否则将被过滤
返回min>parseInt（$（v）.data（'sortm'）；
}).hide（）//隐藏所有不在前3名中的内容

当然，您可以在对

li

排序后放置此项。

小提琴：

非常简单-计算每个数字的使用次数，用类标记前3+，然后隐藏没有它的任何内容

var unique_keys = {};
$.map($('li'), function(a) {    
    unique_keys[$(a).data('sortm')] = unique_keys[$(a).data('sortm')] + 1 || 1; 
});

var sorted = Object.keys(unique_keys).sort().reverse();

var total = 0;
for (var i = 0; i < sorted.length; i++) { 
    $('li[data-sortm=' + sorted[i] + ']').addClass('show');
    total += unique_keys[sorted[i]];
    if(total >= 3) {
         break;   
    }
}

$('li:not(.show)').hide();

var unique_key={}；
$.map（$（'li'），函数（a）{
唯一_键[$（a）.data（'sortm'）]=唯一_键[$（a）.data（'sortm'）]+1 | | 1；
});
var sorted=Object.keys（唯一的_键）.sort（）.reverse（）；
var合计=0；
对于（var i=0；i=3）{
打破
}
}
$（'li:not（.show）'）.hide（）；

试试这个：

var count = 0;
var currentTop = -1;
$('li[data-sortm]').each(function() {
    var $this = $(this);
    var sortm = $this.data('sortm');
    if (count >= 3) {
        if (count == 3 && currentTop == sortm) {
            currentTop = sortm;
            return;
        }
        $this.remove();
        return;
    }
    count++;
    currentTop = sortm;
});

---

你能提供你的分类代码吗，这样我们就可以帮助修改它了？@laughconsor-当然。我编辑了这个问题来显示这个代码。为什么投反对票？我在问如何做某事，并试图学习如何做。我所做的搜索没有提供任何明确的答案，也没有提供我应该寻找的地方。欢迎任何指导。为什么向下投票：堆栈溢出通常是您在尝试自己编写文档时出现的地方。你只是提供了任务，没有任何尝试。这是什么意思？看1

jQuery.fn.filter

。2.

itCounter++

如果它是一个数字，则会将1添加到

itCounter

。3.看看

jQuery.fn.remove

@NULL-我意识到了这一点。我的问题是，我还没有找到一个开始编写代码的好地方。当我不确定应该从哪里开始时，编写代码有点困难。如上所述，欢迎提供指导。如果有人说“尝试阅读[name]jQuery方法…”，我会很高兴地查看它并尝试编写代码，然后编辑我的问题，如果它不起作用。现在我不确定从哪里开始，我认为正则表达式可能是可行的，但我对正则表达式还不够熟悉，无法开始编码。编辑：我刚刚看到你编辑了你的问题，说“看看那些jQuery函数”。我会的。这确实有帮助。非常感谢。