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。