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

Display Top Three Items in a List by Data Attribute

本文关键字：三项 数据属性 显示 列表      更新时间：2023-09-26

我有一个列表，该列表由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版本。

开始吧，我用您想要的东西制作了一个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排序之后。

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();

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

的过程

Fiddle：http://jsfiddle.net/Wj6gP/

非常简单-计算每个数字的使用次数，用类标记前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 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;
});

演示链接

相关文章：