javascript - 突出显示每个表行中的最高第 n 个值

Question

我有下表，我想向每行的前 5 个值添加一个类，仅添加类为“championshipPoints”的 TD。经过一番搜索和反复试验，我已经设法将类(class)添加到最高值，但我正在努力进一步提高。

如果第六个和第七个值相同，我只希望其中一个突出显示。我想尝试自己解决，但可以用一个或两个指针来开始。

提前致谢。

HTML

<table id="2020societyChampionship">
    <tbody>
     <tr class='memberPoints'>
        <td>1</td>
        <td class='playerName' scope='row'>player1</td>
        <td class='championshipPoints'>6</td>
        <td class='championshipPoints'>20</td>
        <td class='championshipPoints'>7</td>
        <td class='championshipPoints'>13</td>
        <td class='championshipPoints'>0</td>
        <td class='championshipPoints'>20</td>
        <td class='championshipPoints'>25</td>
        <td class='championshipPoints'>0</td>
        <td class='championshipPoints'>11</td>
        <td class='championshipPoints'>11</td>
        <td class='championshipPoints'>0</td>
        <td>100</td>
     </tr>
     <tr class='memberPoints'>
        <td>1</td>
        <td class='playerName' scope='row'>player2</td>
        <td class='championshipPoints'>25</td>
        <td class='championshipPoints'>20</td>
        <td class='championshipPoints'>8</td>
        <td class='championshipPoints'>11</td>
        <td class='championshipPoints'>0</td>
        <td class='championshipPoints'>16</td>
        <td class='championshipPoints'>22</td>
        <td class='championshipPoints'>0</td>
        <td class='championshipPoints'>11</td>
        <td class='championshipPoints'>11</td>
        <td class='championshipPoints'>0</td>
        <td>100</td>
     </tr>
    </tbody>

JQ

$(document).ready(function(){
  $('tbody tr').each(function() {

     var $tds = $(this).find('.championshipPoints');
     var values = $tds.map(function(){return parseFloat($(this).text());}).get();

       $tds.eq(values.reduce((iMax, x, i, arr) => x > arr[iMax] ? i : iMax, 
        0)).addClass('highestFive');
  });  
});

JSFiddle

Answer 1

使用sort()和slice()

$('tbody tr').each(function() {
  $(this).find('.championshipPoints').sort(function(a, b) {
    return b.innerText - a.innerText;
  }).slice(0, 5).addClass('highestFive')
});

.highestFive {
  background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="2020societyChampionship">
  <tbody>
    <tr class='memberPoints'>
      <td>1</td>
      <td class='playerName' scope='row'>player1</td>
      <td class='championshipPoints'>6</td>
      <td class='championshipPoints'>20</td>
      <td class='championshipPoints'>7</td>
      <td class='championshipPoints'>13</td>
      <td class='championshipPoints'>0</td>
      <td class='championshipPoints'>20</td>
      <td class='championshipPoints'>25</td>
      <td class='championshipPoints'>0</td>
      <td class='championshipPoints'>11</td>
      <td class='championshipPoints'>11</td>
      <td class='championshipPoints'>0</td>
      <td>100</td>
    </tr>
    <tr class='memberPoints'>
      <td>1</td>
      <td class='playerName' scope='row'>player2</td>
      <td class='championshipPoints'>25</td>
      <td class='championshipPoints'>20</td>
      <td class='championshipPoints'>8</td>
      <td class='championshipPoints'>11</td>
      <td class='championshipPoints'>0</td>
      <td class='championshipPoints'>16</td>
      <td class='championshipPoints'>22</td>
      <td class='championshipPoints'>0</td>
      <td class='championshipPoints'>11</td>
      <td class='championshipPoints'>11</td>
      <td class='championshipPoints'>0</td>
      <td>100</td>
    </tr>
  </tbody>
</table>