按數據屬性顯示列表中的前三項

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 2.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的排序。

Answer 2

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 3

小提琴：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(); 

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