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

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

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

Answer 2

我们走了，我用你正在寻找的东西做了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之后。

Answer 3

小提琴：http://jsfiddle.net/Wj6gP/

非常简单 - 计算每个数字的使用次数，用一个类标记前三个，然后隐藏任何没有它的东西。

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

Answer 4

试试这个：

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

Demo Link

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

4 个答案: