jQuery值大於第6個元素？

Question

我有一些數據，看起來像這樣的表：

Adam $50 
Evan $20 
Frank $80 
Harold $90 
Jeff $20 
Linus $10 
Sam  $87 
Zach $100 

結果按名字字母順序排序，並可以讓他們身邊的任何$量。

我需要使前五個數量大膽和紅色，以及追加前面五個名字旁邊的＃1，＃2，＃3等。

jQuery可以做到這一點，而無需$列排序？

Answer 1

$(function() 
{ 
    var i = 5, 
     values = $('#myTable').find('td:odd').map(function (i, elt) 
       { 
        var $elt = $(elt); 
        return {$td: $elt, 
          value: parseFloat($elt.text().slice(1))}; 
       }).get().sort(function (a,b) 
       { 
        return b.value-a.value; 
       }); 

    while(i--) 
    { 
     values[i].$td.css({fontWeight: 'bold', color: '#F00'}) 
        .prev().append(' #' + (i+1)); 
    } 
}); 

運作演示：http://jsbin.com/iseme3/7

隨意問有關你有什麼不明白。

Answer 2

不是直接的，這太具體了，不能被抽象框架層處理。不過，你可以很容易地完成這個任務。對於像一個表：

<table id="table_id"> 
    <tr><th class="rank"></th><th class="name">Name</th><th class="amount">Amount</th></tr> 

    <tr><td></td><td>Adam</td><td>$50</td></tr> 
    <tr><td></td><td>Evan</td><td>$20</td></tr> 
    <tr><td></td><td>Frank</td><td>$80</td></tr> 
    <tr><td></td><td>Harold</td><td>$90</td></tr> 
    <tr><td></td><td>Jeff</td><td>$20</td></tr> 
    <tr><td></td><td>Linus</td><td>$10</td></tr> 
    <tr><td></td><td>Sam</td><td>$87</td></tr> 
    <tr><td></td><td>Zach</td><td>$100</td></tr> 
</table> 

你可以這樣做：

var top = 5; // apply only transformation to the top n rows 
var rankCol, nameCol, amountCol; 

$('#table_id').find('tr') 
    // get first row and find where are the name and amount columns... 
    .slice(0, 1).each(function(i,row) { 
     rankCol = $(row).find('.rank').index(); 
     nameCol = $(row).find('.name').index(); 
     amountCol = $(row).find('.amount').index(); 
    }).end() 
    // remove first row 
    .slice(1) 
    // sort returned set by 'amount' in ascending order 
    .sort(function(a,b) { 
     return parseFloat($(a).find('td:eq('+amountCol+')').text().substr(1)) - parseFloat($(b).find('td:eq('+amountCol+')').text().substr(1)); 
    }) 
    // get the last 'top' rows 
    .slice(-top) 
    // apply bold + red to column 'amount' 
    .find('td:eq('+amountCol+')').css({'font-weight':'bold', 'color':'red'}).end() 
    // prepend #n to column 'rank' 
    .find('td:eq('+rankCol+')').each(function(i,col) { 
     $(col).text('#'+(top-i)+'. '); 
    }) 
; 

的代碼是爲閱讀而組織，也讓你可以看到jQuery的可以申請一個可重用的模式，以連鎖與調用您的結果。如果您的表格佈局不同，例如您有5列，並且「金額」在第5位，那麼代碼仍然可以不加修改地工作，您只需要將一些類名稱設置爲「名稱」和「金額」列並在第一行尋找該類。

** 編輯 **我還添加了一個保留列來放置排名的文本。這個渲染nameCol已經過時了，但是我仍然保留在代碼中。擁有這樣一個保留的列將所有內容精美地對齊。 :)頂行的數量現在是基於變量的。 ...我仍然可以使用代碼來使它更加靈活/可重用，但我認爲你明白了。

** 備註 **您可以用addClass()代替css()呼叫，而不是定義粗體+紅色。您甚至可以用prepend(element)代替prepend(string)呼叫，以便在名稱前實際設置「#n」。

Answer 3

這是另一種方法。

var arr = $('#mytable').find('td:last-child') 
    .map(function(){ 
    var cleanval = parseInt($(this).text().replace('$',''),10); 
    $(this).addClass('s_'+cleanval); 
    return cleanval; 
    }) 
    .get() 
    .sort(function(a,b){ return (b-a); }) 
    .slice(4); 

for(var i=0,j=arr.length;i<j;i++) { 
    $('td.s_'+arr[i]).addClass('colorize'); 
} 

這裏的工作fiddle。