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-м, тогда код будет работать без изменений, все, что вам нужно, - установить некоторое имя класса в столбцы «имя» и «сумма» и найдите этот класс в первой строке.

** EDIT ** Я также добавил зарезервированный столбец, чтобы поместить текст ранга. Это делает nameCol устаревшим, но я все равно сохранил его в коде. Наличие такого зарезервированного столбца прекрасно сочетает все. :) Число верхних строк теперь зависит от переменных. ... Я все еще мог играть с кодом, чтобы сделать его еще более гибким/многоразовым, но я думаю, вы понимаете.

** Примечание ** вы могли бы заменить css() вызов addClass() вместо, который будет определять смелое + красный. Вы могли бы даже заменить вызов prepend(string) на prepend(element), вместо этого вы можете на самом деле создать «#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.