javascript - 按数据属性显示列表中的前三项

Question

我有一个由 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>

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

我如何使用 jQuery 执行此操作？

我考虑过使用 RegEx，因为我认为这可能是一种方式，但 RegEx 不是我觉得易于使用的领域。

这是我用来对列表进行排序的代码:

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

注意:我使用的是 jQuery v2.1。

Answer 1

我们开始吧，我做了一个JSFiddle与您正在寻找的东西。

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

当然，您可以将它放在 li 排序之后。